arrays - 来自AngularJS中2D数组的表

Question

我坚持希望使用AngularJS可以开箱即用而不会出现任何问题，但是确实很奇怪...

我正在使用JSON服务，该服务以2D数组形式返回数据:

$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]”，但是尝试使用嵌套无法得到任何结果如上所示循环。

难道我做错了什么？似乎太基本了，不能立即使用。请有人帮我解决这个奇怪的问题。

Answer 1

在Angular 1.0.x中，ng-repeat指令存在许多错误，这些错误是由于试图“猜测”是否添加，删除或移动了非对象值(即字符串或数字)而引起的。
问题在于非对象没有自己的身份，因此不可能准确地跟踪它们。在许多情况下，这是有问题的，并且还导致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的方法来区分它们。最简单，最明显的方法是根据项目在集合中的位置来跟踪它们。这是通过使用“按$ 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时应该意识到这一变化。