javascript - 如何在表格元素中填充数据？

Question

我正在尝试在 Angular 框架内显示表格数据

在我的 html 中

<table  class='table'>
        <tr>
             <th ng-repeat='test in tests'>{{test.name}}</th>    // it shows correctly...
         </tr>
          <tr ng-repeat=''>  //not sure what to do here...
                <td>Item</td><td>Item</td><td>Item</td><td>Item</td>
          </tr>
</table>

Controller

.controller('BoxCtrl', ['$scope', function ($scope) {
    $scope.tests = [
      {'name':'header1',
       'items':
           [
               {'name':'Item 1', 'link':'1'},
               {'name':'Item 2', 'link':'2'},
               {'name':'Item 3', 'link':'3'}
           ]
      },
      {'name':'header2',
       'items':
           [
               {'name':'Item 1', 'link':'i1'},
               {'name':'Item 2', 'link':'i2'}
           ]
      },
      {'name':'header3',
       'items':
           [
               {'name':'Item 1', 'link':'i1'},
               {'name':'Item 2', 'link':'i2'}
           ]
      },
      {'name':'header4',
       'items':
           [
               {'name':'Item 1', 'link':'I1'},
               {'name':'Item 2', 'link':'I2'},
               {'name':'Item 3', 'link':'I3'}                      
           ]
      }
    ];
}]);

我在 TH 中显示数据没有问题，但不确定如何在 tr 和 td 中应用 hg-repeat。谁能给我一个提示吗？非常感谢!

Answer 1

你可以这样做:

示例:

<div ng-app="App" ng-controller="ctrl" >
<table  class='table'>
        <tr>
             <th ng-repeat='test in tests'>{{test.name}}</th>    
         </tr>
          <tr ng-repeat='itemsColl in tests'>  
              <td ng-repeat="item in itemsColl.itemsRow">{{item.name}}</td>
          </tr>
</table>
</div>

实时示例:http://jsfiddle.net/choroshin/4mD86/

也在这个 stackoverflow answer您可以找到有关动态表创建的更多信息