通過JSON屬性過濾Angular模板獲取Digest無限循環

我試圖在指令模板中過濾ng-repeat的結果。下面的解決方案，因爲它在屏幕上很好地顯示，但我現在得到的錯誤：Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!我引用此頁和解決方案沒有工作：https://docs.angularjs.org/error/ $ rootScope/infdig通過JSON屬性過濾Angular模板獲取Digest無限循環

有關如何解決這個問題的任何建議？或者更好的方法去解決它？

HTML：

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

模板：

<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>

角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' 
    }; 
});

來源

2016-02-23 Auzy

看看http://stackoverflow.com/questions/17198500/angular-js-pass-filter-to-directive-bi-directional-attribute/17199892#17199892和http://stackoverflow.com/questions/21675300/angularjs傳遞濾波陣列到指令 –

有可能是解決我上面的問題的方式卻是 - 是我發現了一個多避免這個問題的解決方案更好。下面是我做的，而不是：

我在我的控制器創造了這個功能，它基本上抓住所有的JSON屬性相匹配的"cat"屬性：

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

和我的HTML，這實質上是內ng-repeat一個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>

我還創建了一個Codepen我的解決方案：http://codepen.io/Auzy/pen/adeqrP

我希望這有助於！

來源

2016-02-24 17:49:10 Auzy

通過JSON屬性過濾Angular模板獲取Digest無限循環

回答

相關問題