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

时应该意识到这种变化是正确的

AngularJS中的2D数组表

1 个答案: