带有角度的ng-repeat多级表

这是我创建的Js小提琴链接。 HTML代码带有角度的ng-repeat多级表

<div ng-app="myApp"> 
<div ng-controller='tableCtrl'> 
    <div> 
    {{test}} 
    </div> 
    <table ng-repeat='(k,v) in tdata'> 
     <tr ng-repeat='(key,val) in v'> 
      <td >{{k}}</td> 
      <td ng-repeat="(x,y) in val"> 
       <table ng-repeat='(a,b) in y'> 
        <tr ng-repeat="(c,d) in b"> 
         <td>{{d.param}}</td> 
         <td>{{d.description}}</td> 
         <td>{{d.Synopsis}}</td> 
         <td>{{d.value}}</td> 
        </tr> 
       </table> 
      </td> 
     </tr> 
    </table> 
</div> 

</div>

js代码如下

var app = angular.module('myApp',[]).controller('tableCtrl',function($scope){ 
      $scope.test = "hi"; 
      $scope.tdata = { 
    "ARP":[ 
     { 
     "Param1":[ 
      { 
       "12.3":{ 
        "param":"Param1", 
        "value":"1234", 
        "description":"testDescription", 
        "Synopsis":"testSynopsis", 
        "release":"12.3" 
       } 
      }, 
      { 
       "13.2":{ 
        "param":"Param1", 
        "value":"1234", 
        "description":"testDescription", 
        "Synopsis":"testSynopsis", 
        "release":"13.2" 
       } 
      } 
     ] 
     }, 
     { 
     "Param2":[ 
      { 
       "12.3":{ 
        "param":"Param2", 
        "value":"1234", 
        "description":"testDescription", 
        "Synopsis":"testSynopsis", 
        "release":"12.3" 
       } 
      }, 
      { 
       "13.2":{ 
        "param":"Param2", 
        "value":"1234", 
        "description":"testDescription", 
        "Synopsis":"testSynopsis", 
        "release":"13.2" 
       } 
      } 
     ] 
     } 
    ], 
    "BGP":[ 
     { 
     "Param1":[ 
      { 
       "12.3":{ 
        "param":"Param1", 
        "value":"1234", 
        "description":"testDescription", 
        "Synopsis":"testSynopsis", 
        "release":"12.3" 
       } 
      }, 
      { 
       "13.2":{ 
        "param":"Param1", 
        "value":"1234", 
        "description":"testDescription", 
        "Synopsis":"testSynopsis", 
        "release":"13.2" 
       } 
      } 
     ] 
     }, 
     { 
     "Param2":[ 
      { 
       "12.3":{ 
        "param":"Param2", 
        "value":"1234", 
        "description":"testDescription", 
        "Synopsis":"testSynopsis", 
        "release":"12.3" 
       } 
      }, 
      { 
       "13.2":{ 
        "param":"Param2", 
        "value":"1234", 
        "description":"testDescription", 
        "Synopsis":"testSynopsis", 
        "release":"13.2" 
       } 
      } 
     ] 
     } 
    ] 
} 

    });

https://jsfiddle.net/oq6b4rxm/8/

表，我想如何建立静态和问题表时，格式化也有提及。请帮我解决

来源

2017-01-03 venkat

你显示{{K}}每次你在一个子值，这就是为什么它会显示多次。 – Roux

是的，我知道这个问题，无法纠正。仍然试图让子值不重复，无法满足。所以寻找帮助 – venkat

@venkat'$ scope.tdata'中的数据与静态表中的数据不匹配 - 在'$ scope.tdata'中共有8个对象，但静态表中只有4行。你能澄清你想要在表格中显示什么吗？ – Fissio

，你可以使用类似这样的嵌套重复

<div class="col-md-4" ng-repeat="param in parameter"> 
    <div class="form-group" ng-class="{ 'has-error' : newLeadForm.parameterModel{{param.Id}}.$invalid && !newLeadForm.parameterModel{{param.Id}}.$pristine || newLeadForm.parameterModel{{param.Id}}.$invalid && submitted, 'has-success' : newLeadForm.parameterModel{{param.Id}}.$valid && !newLeadForm.parameterModel{{param.Id}}.$pristine || newLeadForm.parameterModel{{param.Id}}.$valid && submitted}"> 
     <label for="website">{{param.Name}}: </label> 
     <select name="parameterModel{{param.Id}}" id="parameterModel{{param.Id}}" ng-model="newlead.parameterModel[param.Id]" ng-change="calculateRanking()" ng-options="v.Id as v.Name for v in param.parameterValues" ng-disabled="param.IsCalculated" ng-required="!param.IsCalculated" class="form-control" required> 
      <option value="">Select Value </option> 
     </select> 
     <p class="help-block"> 
      <span ng-show="newLeadForm.parameterModel{{param.Id}}.$invalid && !newLeadForm.parameterModel{{param.Id}}.$pristine || newLeadForm.parameterModel{{param.Id}}.$invalid && submitted">Select {{param.Name}} Value.</span> 
     </p> 
    </div> 
</div>

来源

2017-01-03 13:35:20 rvchauhan

带有角度的ng-repeat多级表

回答

相关问题