使用二维数组制作两层 div table 无法正常工作

Question

我有一个这样的数组：

TestingTable : [
       {TestingType:[
             {Id:1,Name:"Functional Testing"},
             {Id:2,Name:"Regression Testing"},
             {Id:3,Name:"Integration"},
             {Id:4,Name:"BVT"}]
       },
      {EnvironmentTypes:[
             {Id:1,Name:"Dev/QE (VCD)"},
             {Id:2,Name:"Staging"},
             {Id:3,Name:"PPE"},
             {Id:4,Name:"01's"}]
      }
]

我想使用上面的数组并像这样创建一个 div table ：

到目前为止，我已经尝试过这种方式，但它并没有按照我想要的方式进行..

<h3>Testing</h3>
<div class="rTable" ng-if="show" ng-repeat="item in TestingTable">
    <div class="rTableRow">
        <div class="rTableHead"><strong></strong>
        </div>
        <div class="rTableHead" ng-repeat="test in item.EnvironmentTypes"><span style="font-weight: bold;">{{test.Name}}</span>
        </div>
    </div>
    <div class="rTableRow" ng-repeat="environ in item.TestingType">
        <div class="rTableHead"><span style="font-weight: bold;">{{environ.Name}}</span>
        </div>
        <div class="rTableCell" ng-repeat="test in item.EnvironmentTypes">
            <input type="text" ng-model="result">
        </div>

    </div>
</div>

我应该如何使用 ng repeat 才能得到图片中的两层 table？

Answer 1

angular.module('app', [])
.controller('ctrl', ['$scope', function($scope) {
    $scope.TestingTable = [
       {TestingType:[
             {Id:1,Name:"Functional Testing"},
             {Id:2,Name:"Regression Testing"},
             {Id:3,Name:"Integration"},
             {Id:4,Name:"BVT"}]
       },
      {EnvironmentTypes:[
             {Id:1,Name:"Dev/QE (VCD)"},
             {Id:2,Name:"Staging"},
             {Id:3,Name:"PPE"},
             {Id:4,Name:"01's"}]
      }
  ];
}])

table, th, td {
    border: 1px solid #2b91d6;
    border-collapse: collapse;
}
thead tr{
    background-color:#97cff5;
    text-align:center;
}
td{
    width:130px;    
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app='app' ng-controller="ctrl">
 <table>
   <thead>
     <tr>
       <td></td>
       <td ng-repeat='item in TestingTable[1].EnvironmentTypes'>{{item.Name}}</td>
     </tr>
   </thead>
   <tbody>
     <tr ng-repeat='item in TestingTable[0].TestingType'>
       <td style='text-align:right'>{{item.Name}}</td>
       <td ng-repeat='x in TestingTable[1].EnvironmentTypes'></td>
     </tr>
   </tbody>
 </table>
</div>

Answer 2

查看此解决方案

在您的模板文件中

<body ng-controller="MainCtrl">
  <table>
    <tr>
      <th></th>
      <th ng-repeat="item in data[1].EnvironmentTypes">{{item.Name}}</th>
    </tr>
    <tr ng-repeat="item in data[0].TestingType">
      <td>{{item.Name}}</td>
      <td ng-repeat="item1 in data[1].EnvironmentTypes"></td>

    </tr>
  </table>
</body>

在你的控制器中

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.data =  [
       {TestingType:[
             {Id:1,Name:"Functional Testing"},
             {Id:2,Name:"Regression Testing"},
             {Id:3,Name:"Integration"},
             {Id:4,Name:"BVT"}]
       },
      {EnvironmentTypes:[
             {Id:1,Name:"Dev/QE (VCD)"},
             {Id:2,Name:"Staging"},
             {Id:3,Name:"PPE"},
             {Id:4,Name:"01's"}]
      }
];

});

使用二维数组制作两层 div table 无法正常工作

making two tier div table with 2D array doesnt work properly

html

angularjs

angularjs-ng-repeat