6

我被困在我期望AngularJS开箱即用没有任何问题的东西上，但奇怪的是......

我正在使用以二维数组形式返回数据的 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]”这样的循环，但我无法获得任何结果尝试使用嵌套循环如上图。

难道我做错了什么？这似乎太基本了，不能马上工作。请有人帮我解决这个奇怪的问题。

4

1 回答 1

14

在 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 时应该注意此更改

于 2013-10-08T12:37:03.393 回答