在AngularJS中从2D数组生成表格

Question

我遇到了一个问题，我原本希望使用AngularJS可以毫无问题地解决它，但奇怪的是...

我正在使用返回2D数组数据的JSON服务：

$scope.data= [
    ["val-11", "val-12", "val-13"],
    ["val-21", "val-22", "val-23"]
    ];

我正在尝试生成一个如下所示的表格：

从这个表中，我试图生成以下类似的表格：

<table>
<tr ng-repeat="row in data">
<td ng-repeat="col in row">{{col}}</td>
</tr>
</table>

我不明白为什么AngularJS不能处理这样一个基本场景。如果需要，我可以得到正确的父循环$index，并可以通过像这样的一个循环“col in data[0]”迭代值，但是我试图使用上面展示的嵌套循环时却无法得到任何结果。

我做错了什么吗？这似乎太基本了，不应该立即就能解决。请有人帮忙解决这个奇怪的问题。

- vitaly-t

---

对我来说运行良好：http://jsfiddle.net/AWkQj/ - Ivan Chernykh

我找到了问题（如下所示），它只是一个简单的错误。很遗憾有人踩了我的问题，这是AngularJS团队需要解决的一个严重问题。 - vitaly-t

你应该在控制台中看到一个错误，其中包含一个指向http://docs.angularjs.org/error/ngRepeat:dupes的链接。 - groner

是的，以下语法似乎可以在1.2 RC2中使用：<table> <tr ng-repeat="row in data"> <td ng-repeat="col in row track by $index"> {{col}} </td> </tr> </table>。但它在早期版本中不起作用，这意味着它是一个破坏性的特性。感谢您指出这一点。我确实喜欢它在早期版本中的工作方式，因为这是任何人都期望它能够正常工作的方式。 - vitaly-t

Answer 1

在 Angular 1.0.x 中，ng-repeat 指令存在许多 bug，这是由于尝试“猜测”非对象值（即字符串或数字）是否已添加、删除或移动造成的。问题在于，非对象本身没有标识，因此无法准确地跟踪它们。这在许多情况下都是有问题的，也导致 ngRepeat 代码充斥着大量的解决方法和边缘情况。

在 1.2 版本中，我们改进了 ng-repeat 的语法，使开发人员可以自己指定如何准确地识别集合中的项。这是通过“track by”关键字完成的。其中一个结果是，我们禁止具有相同标识符的项目。

默认情况下，ng-repeat 将尝试按项的值进行跟踪。如果您重复使用相同的对象、相同的字符串或数字等重复项，则 ng-repeat 将抱怨，并在控制台中显示错误。

var TableCtrl = function($scope) {
  $scope.data= [
    ["", "", "val-13"]
  ];
}

这里的子数组中前两个元素是相同的"空"字符串。可以查看此 fiddle：http://jsfiddle.net/tEU8r/

如果您确实希望在集合中有重复的项，则需要提供一种方法让 ng-repeat 区分它们。最简单和显而易见的方法是通过其在集合中的位置跟踪这些项。“track by $index”就是这么做的。以下是使用这种方法修复的相同示例：

<table ng-controller="TableCtrl">
  <tr ng-repeat="row in data">
    <td ng-repeat="col in row track by $index">
       {{$parent.$index}}-{{$index}} {{col}}
    </td>
  </tr>
</table>

http://jsfiddle.net/h44Z8/

因此，这不是AngularJS中的错误。但是，您是正确的，当升级到1.2版本时，人们应该注意这种变化。

- Pete BD