Question

这是我创建的Js Fiddle链接。 HTML代码

<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/

表格格式化时也提到了创建静态和问题表格。请帮我修理

Answer 1

你可以使用类似的东西进行嵌套重复

<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>

带角度的ng-repeat多级表

1 个答案: