AngularJS錯誤：[$ rootScope：infdig]引起的過濾器

我想通過AngularJS過濾器對對象進行排序。但使用我的自定義過濾器時發生無限$摘要錯誤。

我想製作下列語言列表。該列表按語言名稱排序。

阿爾巴尼亞
阿拉伯語
荷蘭
英語
古吉拉特
希伯來語立陶宛
俄羅斯
斯洛伐克
烏爾都語

以下是HTML。

<!DOCTYPE html> 
<html lang="ja" ng-app="MYAPP"> 
<head> 
    <meta charset="UTF-8"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script> 
    <script src="app.js"></script> 
    <title>Sort Object</title> 
</head> 
<body> 
    <div ng-controller="languagesCtrl"> 
     <ul> 
      <li ng-repeat="language in languages | objectOrderBy:'name'"> 
       {{language.value.name}} 
      </li> 
     </ul> 
    </div> 
</body> 
</html>

以下是AngularJS代碼。

angular.module('MYAPP', []). 

filter('objectOrderBy', function(){ 
    return function(obj, prop){ 
     var array = []; 
     for(var key in obj){ 
      array.push({ 
       key: key, 
       value: obj[key] 
      }); 
     } 
     return array.sort(function(o1, o2){ 
      return (o1.value[prop] > o2.value[prop])? 1: -1; 
     }); 
    }; 
}). 

controller('languagesCtrl', ["$scope", function($scope){ 
    $scope.languages = { 
     "sq": { 
      "name": "Albanian" 
     }, 
     "ar": { 
      "name": "Arabic" 
     }, 
     "nl": { 
      "name": "Dutch" 
     }, 
     "en": { 
      "name": "English", 
     }, 
     "gu": { 
      "name": "Gujarati" 
     }, 
     "he": { 
      "name": "Hebrew" 
     }, 
     "lt": { 
      "name": "Lithuanian" 
     }, 
     "ru": { 
      "name": "Russian" 
     }, 
     "sk": { 
      "name": "Slovak" 
     }, 
     "ur": { 
      "name": "Urdu" 
     } 
    }; 
}]);

$ scope.languages的結構無法更改，因爲這實際上由API服務器提供。爲什麼會發生錯誤？請告訴我如何解決問題。

來源

2014-10-20 redstone

你應該創建一個js小提琴。 – bencripps 2014-10-20 13:29:12

問題是您正確使用了filter。

角filter的工作原理與native JavaScriptArray.prototype.filter()類似，它迭代數組，對每個索引執行回調。

角度過濾器實際上會返回過濾器函數，您正在通過return function() {}執行該過濾器函數，但是在返回函數中您正在返回另一個函數（您的排序方法）。爲maximum recursion

錯誤$digest() iterations reached. Aborting!是角說已經達成，而非持續的執行和打擊堆棧，功能停止，而不是導致瀏覽器崩潰，（這是很好的！）。爲了解決這個問題，我建議你或者在一個過濾器之外進行排序，就在一個控制器內（我不會建議）在服務器端從你的API調用中進行排序（這可能很不錯），或者重寫您的自定義過濾器以返回單個函數，而不是嘗試對每個過濾器調用中的整個數組進行排序。你應該看看Angular builtin過濾器，因爲它可能會有所幫助，但你也可以看到它們是如何構建的。

來源

2014-10-20 14:01:30 bencripps

謝謝你的建議。我會傾向於內置過濾器。 – redstone 2014-10-22 04:48:52

AngularJS錯誤：[$ rootScope：infdig]引起的過濾器

回答

相關問題