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('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中找到有关动态表创建的更多信息

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

1 个答案: