Question

这是我的代码：

<h1 ng-repeat="item in func()">something</h1>

$scope.func = function(){
  return [{"property" : "value1"},{"property": "value2"}];
}

在Angular.js v.1.1.1中，没有错。在Angular.JS v 1.2.1中，我得到了一个infDig错误。

Fiddle of v.1.1.1

Fiddle of v.1.2.1

你能解释一下这种情况吗？非常感谢。

Answer 1

从AngularJS 1.2开始：将“track by”表达式添加到ng-repeat中，更恰当地解决了这个问题在以下代码中。
<h1 ng-repeat="item in func() track by $index">something</h1>

$scope.func = function(){
  return [{"property" : "value1"},{"property": "value2"}];
}
以下文章有助于更详细地理解表达式以及它为何如此有用，特别是在处理$$ haskey Using Track-By With ngRepeat In AngularJS 1.2 by Ben Nadal时。

问题在于你每次都在创建一个新数组，所以它是一个角度需要跟踪的新东西。据我所知，ng-repeat运行，然后立即再次检查其集合，以查看该周期中是否有任何变化。因为该函数返回一个新数组，这被视为一个变化。

检查一下：http://jsfiddle.net/kL5YZ/。 如果您查看console.log并单击按钮，您将看到每次ng-repeat运行时对象的$$hashKey属性都会被更改。

从版本1.1.4开始发生更改，但更改日志未提供有关行为不同的原因的任何线索。这种新行为对我来说更有意义。

这是一篇很棒的文章，我发现了深入解释当前的行为：How to Loop through items returned by a function with ng-repeat?

如果确保每次都返回相同的对象/数组，则不会出现错误。您可以根据参数使函数缓存它创建的任何内容，并在传入这些参数时始终返回相同的数组/对象。因此，myFunc（'foo'）将始终返回相同的数组，而不是一个看起来相同的新数组相同。请参阅下面的代码中的注释。的 Live demo (click).

<div ng-repeat="foo in foos"> <div ng-repeat="bar in barFunc(foo)">{{bar.text}}</div> <div ng-repeat="bar in barFunc('test')">{{bar.text}}</div> </div>

<强> JavaScript的：

var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, myService) { $scope.foos = [ 'a','b','c' ]; //I put this into a service to avoid cluttering the controller $scope.barFunc = myService.getObj; }); app.factory('myService', function() { /* * anything created will be stored in this cache object, * based on the arguments passed to `getObj`. * If you need multiple arguments, you could form them into a string, * and use that as the cache key * since there's only one argument here, I'll just use that */ var cache = {}; var myService = { getObj : function(val) { //if we haven't created an array with this argument before if (!cache[val]) { //create one and store it in the cache with that argument as the key cache[val] = [ {text:val} ]; } //return the cached array return cache[val]; } }; return myService; });

具有ng-repeat函数的AngularJS InfDig错误（无限循环），返回对象数组

1 个答案: