javascript - random orderBy in AngularJS 1.2 returns 'infdig' errors - Stack Overflow

admin管理员组

文章数量:1289868

Using the random orderBy sort technique in this question works fine in AngularJS 1.1.

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.list = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
    $scope.random = function() {
        return 0.5 - Math.random();
    }
}

In 1.2, though, it puts infdig errors into the console and takes a much longer time to return the sorted results: /

The error in the console looks like:

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [["fn: $watchCollectionWatch; newVal: 42; oldVal: 36"],["fn: $watchCollectionWatch; newVal: 47; oldVal: 42"],["fn: $watchCollectionWatch; newVal: 54; oldVal: 47"],["fn: $watchCollectionWatch; newVal: 61; oldVal: 54"],["fn: $watchCollectionWatch; newVal: 68; oldVal: 61"]]

The documentation for orderBy doesn't have an example of using function expressions, only string expressions. Did something change, or is this a bug?

Using the random orderBy sort technique in this question works fine in AngularJS 1.1.

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.list = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
    $scope.random = function() {
        return 0.5 - Math.random();
    }
}

In 1.2, though, it puts infdig errors into the console and takes a much longer time to return the sorted results: http://jsfiddle/mblase75/jVs27/

The error in the console looks like:

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [["fn: $watchCollectionWatch; newVal: 42; oldVal: 36"],["fn: $watchCollectionWatch; newVal: 47; oldVal: 42"],["fn: $watchCollectionWatch; newVal: 54; oldVal: 47"],["fn: $watchCollectionWatch; newVal: 61; oldVal: 54"],["fn: $watchCollectionWatch; newVal: 68; oldVal: 61"]]

The documentation for orderBy doesn't have an example of using function expressions, only string expressions. Did something change, or is this a bug?

• javascript
• angularjs
• angularjs-orderby

Share Improve this question Follow edited May 23, 2017 at 12:00 CommunityBot 111 silver badge asked Feb 5, 2014 at 19:12 BlazemongerBlazemonger 93k2727 gold badges145145 silver badges181181 bronze badges 1

• Update: an error submission resulted in the explanation of what was happening internally. – Blazemonger Commented Feb 5, 2014 at 20:19

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

I'm not sure about previous versions, but in the current version, any expression watched on a scope, such as that passed to ng-repeat is usually evaluated at least twice per digest. The digest cycle only finishes when the results of all evaluated expressions, across all scopes of the entire Angular app, are identical between two successive evaluations.

Because each evaluation of

<li ng-repeat="i in list | orderBy:random">{{i}}</li>

results in calls to random(), and so a different order, then Angular will keep on evaluating the expressions, until it hits its limit of 10 digest iterations, and throws an error.

The solution to this is to set the order outside of the template, in the controller:

$scope.list = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
$scope.rankedList = [];
angular.forEach($scope.list, function(item) {
    $scope.rankedList.push({
        item: item,
        rank: 0.5 - $window.Math.random()
    });
});

And then order using the field by something like:

<li ng-repeat="i in rankedList | orderBy:'rank'">{{i.item}}</li>

This can be seen at this jsfiddle .

You can solve this in an Angular way with a simple custom filter. Here I'm using the underscore shuffle method which implements Fischer-Yates.

You could substitute the guts of the shuffle with your own algorithm if you prefer.

angular.module('shuffle', [])
  .filter('shuffle', function() {
    return function(ary) {
      return _.shuffle(ary);
    }
  });

We can now pipe our array through this filter, like so:

<li ng-repeat='option in options | shuffle'>

The filter will be called once when the template is rendered.

本文标签： javascriptrandom orderBy in AngularJS 12 returns 39infdig39 errorsStack Overflow