Angular filter works but causes “10 $digest iterations reached”

by

This happens because _.groupBy returns a collection of new objects every time it runs. Angular’s ngRepeat doesn’t realize that those objects are equal because ngRepeat tracks them by identity. New object leads to new identity. This makes Angular think that something has changed since the last check, which means that Angular should run another check (aka digest). The next digest ends up getting yet another new set of objects, and so another digest is triggered. The repeats until Angular gives up.

One easy way to get rid of the error is to make sure your filter returns the same collection of objects every time (unless of course it has changed). You can do this very easily with underscore by using _.memoize. Just wrap the filter function in memoize:

app.filter("ownerGrouping", function() {
  return _.memoize(function(collection, field) {
    return _.groupBy(collection, function(item) {
      return item.owner;
    });
  }, function resolver(collection, field) {
    return collection.length + field;
  })
});

A resolver function is required if you plan to use different field values for your filters. In the example above, the length of the array is used. A better be to reduce the collection to a unique md5 hash string.

See plunker fork here. Memoize will remember the result of a specific input and return the same object if the input is the same as before. If the values change frequently though then you should check if _.memoize discards old results to avoid a memory leak over time.

Investigating a bit further I see that ngRepeat supports an extended syntax ... track by EXPRESSION, which might be helpful somehow by allowing you to tell Angular to look at the owner of the restaurants instead of the identity of the objects. This would be an alternative to the memoization trick above, though I couldn’t manage to test it in the plunker (possibly old version of Angular from before track by was implemented?).

More Related Contents:

  1. The Advantages when we put AngularJS within Symfony web application
  2. How to Display blob (.pdf) in an AngularJS app
  3. How to call a method defined in an AngularJS directive?
  4. How to execute AngularJS controller function on page load?
  5. How do I store data in local storage using Angularjs?
  6. Angularjs dynamic ng-pattern validation
  7. Is there a way to make AngularJS load partials in the beginning and not at when needed?
  8. What’s the difference between ng-model and ng-bind
  9. Angular js init ng-model from default values
  10. What’s the most concise way to read query parameters in AngularJS?
  11. Implementing loading spinner using httpInterceptor and AngularJS 1.1.5
  12. How to get element by classname or id
  13. Dynamically set the value of ui-sref Angularjs
  14. How do you get AngularJS to bind to the title attribute of an A tag?
  15. AngularJS not detecting Access-Control-Allow-Origin header?
  16. bootsrap nav-bar collapsable cannot make it work
  17. How to modify scope from within a directive in AngularJs
  18. Setting dynamic scope variables in AngularJs – scope.
  19. How to create a localhost server to run an AngularJS project
  20. RegEx for no whitespace at the beginning and end
  21. Can you change templateUrl on the fly?
  22. angularjs move focus to next control on enter
  23. AngularJS – Get List of All Registered Services?
  24. angularjs 1.x support lifecycle and end-of-life
  25. Fontawesome is not working when project is built with grunt
  26. angularjs text area character counter
  27. Binding inputs to an array of primitives using ngRepeat => uneditable inputs
  28. How to ‘unwatch’ an expression
  29. Good way to dynamically open / close a popover (or tooltip) using angular, based on expression?
  30. scope and controller instantiation with ui router

Leave a Comment