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"]
  ];
}

这里子数组中的前两项是相同的"空"字符串.看到这个小提琴: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时意识到这种变化