使用AngularJS添加几个表格单元格

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重复做同样的，所以就变成：

<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对面。