Question

我变得疯了。这个hello-worldesque例子有什么不对？我试图用angularjs 1.5.5测试一些基本的东西。

HTML：

<div ng-app="myApp" ng-controller="Ctrl">
     <h3>test 1:</h3>
     <span ng-repeat="label in test(1)">{{label}}</span>
     <h3>test 2:</h3>
     <span ng-repeat="label in test(2)">{{label}}</span>
</div>

JS：

angular.module('myApp', [])
    .controller('Ctrl', ['$scope', function ($scope) {
    $scope.test = function(amount) {
      var result = [];
      result.push("1");
      for (var i = 0; i < amount; i++) {
        result.push("2");
      }
      result.push("3");
      return result;
    }    
}]);

JsFiddle：http://jsfiddle.net/d3v6vq7w/7/

Simpy put，循环使用1次迭代，但不是例如2.没有任何东西被打印出来。是什么给了什么？

Answer 1

您返回的数组中有重复项。添加track by $index可以解决您的问题。

<span ng-repeat="label in test(2) track by $index">{{label}}</span>

小提琴 - http://jsfiddle.net/ayay0d6u/

Answer 2

如果你看一下错误信息，你就会得到答案。

错误：ngRepeat：dupes重复中的重复键重复转发器是不允许的。使用'track by'表达式指定唯一键。 Repeater：test in test（2），Duplicate key：string：2，Duplicate 价值：2

From error page

禁止重复键，因为AngularJS使用键来关联DOM 带有项目的节点。

Answer 3

那是因为不允许在转发器中重复。使用“track by”表达式来解决此问题。

在您的示例中，test2返回[1,2,2,3]，它具有重复元素。

上面的示例可以通过$ index使用track来解决。

您可以参考angular js文档：https://docs.angularjs.org/error/ngRepeat/dupes

ng-repeat，for-loop和push

3 个答案: