random orderBy in AngularJS 1.2 returns ‘infdig’ errors

by

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 .

More Related Contents:

  1. orderBy multiple fields in Angular
  2. Why are Callbacks from Promise `.then` Methods an Anti-Pattern
  3. How to display length of filtered ng-repeat data
  4. Clicking a button within a form causes page refresh
  5. How to dynamically change header based on AngularJS partial view?
  6. Request header field Access-Control-Allow-Headers is not allowed by Access-Control-Allow-Headers
  7. What’s the recommended way to extend AngularJS controllers?
  8. Losing scope when using ng-include
  9. SyntaxError: Unexpected token o in JSON at position 1
  10. angularjs: allows only numbers to be typed into a text box
  11. Using Jquery Datatable with AngularJs
  12. How do I use Bluebird with Angular?
  13. How to implement history.back() in angular.js
  14. How to debug angular protractor tests in WebStorm
  15. What’s the difference/incompatibility between ng-model and ng-value?
  16. Global Ajax error handler with AngularJS
  17. Angular JS custom delimiter
  18. Where to put model data and behaviour? [tl; dr; Use Services]
  19. AngularJS: How do I manually set input to $valid in controller?
  20. How can I handle browser tab close event in Angular? Only close, not refresh
  21. Using jqgrid with popover from angular ui bootstrap
  22. how to change the headers for angularjs $http.jsonp
  23. How can I access the value of a promise?
  24. AngularJS ng-src inside of iframe
  25. Show pop-ups the most elegant way
  26. AngularJS: lazy loading controllers and content
  27. Is it a bad practice to use jQuery in Angular? [closed]
  28. Rename Object Key in an array using javascript
  29. Function Called Multiple Times in AngularJS Repeat Section
  30. Load static JSON file in Webpack

Leave a Comment