Question

我想通过AngularJS Filter对Object进行排序。但使用我的自定义过滤器时会出现Infinite $ digest错误。

我想制作以下语言列表。该列表按语言名称排序。

阿尔巴尼亚
阿拉伯
荷兰
英
古吉拉特
希伯来语立陶宛语
俄
斯洛伐克语
乌尔都语

以下是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服务器提供的。为什么会出现错误？请告诉我如何解决问题。

Answer 1

问题是您未正确使用filter。

Angular filter与native JavaScript Array.prototype.filter()类似，因为它遍历数组，对每个索引执行回调。

角度过滤器实际上正在返回过滤器函数，您正在通过return function() {}执行过滤函数，但是在返回函数中，您将返回另一个函数（您的排序方法）。

错误$digest() iterations reached. Aborting!已经达到maximum recursion的角度说话，而不是连续执行和打击堆栈，函数停止，而不是导致浏览器崩溃（这很好！）。

要解决此问题，我建议您在过滤器之外进行排序，只需在控制器内（我不建议）在服务器端从API调用中排序（可能是很好），或重做自定义过滤器以返回单个函数，而不是尝试从每个过滤器调用中排序整个数组。您应该查看Angular内置过滤器，因为它可能会有所帮助，但您也可以看到它们是如何构建的。

AngularJS错误：由Filter引起的[$ rootScope：infdig]

1 个答案: