Filtering Angular templates by JSON property gets Digest infinite loop

Question

I am attempting to filter the results of an ng-repeat in a directive template. The below solution works as in it displays well on the screen, however I now get the error: Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting! I referenced this page and the solution did not work: https://docs.angularjs.org/error/$rootScope/infdig

Any suggestions on how I can fix this? Or a better way to go about it?

HTML:

<filtered-set items="businesses | filter : {cat: 'jedi'} : true | filter:query |orderBy: orderList"></filtered-set>

Template:

<div class="bscroll mThumbnailScroller" data-mts-axis="x">
    <ul>
      <li class="business-card" data-ng-repeat="business in items" data-ng-click="select(business)">
        <h2>{{business.name}}</h2>
        <p>{{business.cat}}</p>
      </li>
    </ul>
  </div>

Angular JS:

.controller('starWarsCtrl', function ($scope) {
  $scope.businesses = [
    {"name": "Obi-Wan Kenobi",
     "index":88,
      "cat": "jedi"},
    {"name": "Yoda",
     "index":69,
      "cat":"jedi"},
    {"name": "Lando",
     "index":31,
      "cat": "smuggler"},
    {"name": "Han Solo",
     "index":90,
      "cat": "smuggler"},
    {"name": "Darth Vader",
     "index":98,
      "cat": "sith"},
    {"name": "Jar-Jar Binks",
     "index":80,
      "cat": "alien"},
    {"name": "Mace Windu",
     "index":45,
      "cat": "jedi"},
    {"name": "Chewy",
     "index":76,
      "cat": "smuggler"}
  ];

.directive('filteredSet', function() {
  return {
    restrict: 'E',
    scope: {
      items: '='
    },
    templateUrl: 'partials/filtered-set.html'
  };
});

take a look at http://stackoverflow.com/questions/17198500/angular-js-pass-filter-to-directive-bi-directional-attribute/17199892#17199892 and http://stackoverflow.com/questions/21675300/angularjs-passing-filtered-array-to-directive — Italo Ayres, Feb 24 '16 at 02:29

score 0 · Accepted Answer · answered Feb 24 '16 at 17:49

There may be a way to solve my above question as-is however I found a much better solution to avoid that problem. Here is what I did instead:

I created this function in my controller, it basically grabs all the JSON properties matching the "cat" property:

     angular.forEach($scope.data, function(item) {
    //item.cat is a string
    if (categories.indexOf(item.cat) == -1) {
      categories.push(item.cat);
    }
});
    return categories;
  }

and my HTML, which is essentially a ng-repeat within an ng-repeat:

<div data-ng-app="app" data-ng-controller="starWarsCtrl">
    <ul>
        <li data-ng-repeat="cat in getCategories()">
          <h2>{{cat}}</h2>
          <div ng-click="select(i)" ng-repeat="i in data | filter:{cat: cat}">
    <p>{{i.name}}</p>
  </div>
      </li>
    </ul>
</div>

I also created a Codepen with my solution: http://codepen.io/Auzy/pen/adeqrP

I hope this helps!

Filtering Angular templates by JSON property gets Digest infinite loop

1 Answers1