Question

我正在使用Angular.js和ng-repeat指令来创建表格单元格。我有对象的数组：

$scope.items = [{ name: 'item1', value: [{ val1: '1' }, { val2: '2' }] }, 
                { name: 'item2', value: [{ val1: '3' }, { val2: '4' }] ]

这是我的标记：

<tr ng-repeat="item in items" >
   <td>{{item.name}}</td>
   <td ng-repeat="another_item in item.value">{{another_item.val1 + another_item.val2}}</td>
</tr>

有人可以解释一下，为什么带td的第二个构造产生两个标签。在这种情况下，此构造如何与plus一起使用：{{another_item.val1 + another_item.val2}}

谢谢。

Answer 1

ngRepeat遍历数组并将其所在的元素添加到每个值的dom中。

在您的情况下，迭代项目将添加以下内容：

<tr ng-repeat="item1" >
   <td>{{item1.name}}</td>
   <td ng-repeat="another_item in item2.value">{{another_item.val1 + another_item.val2}}</td>
</tr>

<tr ng-repeat="item2" >
   <td>{{item2.name}}</td>
   <td ng-repeat="another_item in item2.value">{{another_item.val1 + another_item.val2}}</td>
</tr>

内部ng-repeat也是如此，所以它变为：

<tr ng-repeat="item1" >
   <td>{{item1.name}}</td>
   <td ng-repeat="firstIndex">{{firstIndex.val1 + firstIndex.val2}}</td>
   <td ng-repeat="secondIndex">{{secondIndex.val1 + secondIndex.val2}}</td>
</tr>

<tr ng-repeat="item2" >
   <td>{{item2.name}}</td>
   <td ng-repeat="firstIndex">{{firstIndex.val1 + firstIndex.val2}}</td>
   <td ng-repeat="secondIndex">{{secondIndex.val1 + secondIndex.val2}}</td>
</tr>

看看为什么它不起作用？由于firstIndex只有val1，因此无法添加val2。与secondIndex相反。

使用AngularJS添加一些表格单元格

1 个答案: