angularjs自定義過濾器，用於在對象數組中搜索

Question

我有一個對象

{"A":[],"B":[],"C":[],"D":[],"E":[],"F":[{"name":"Fargo","id":29}],"G":[],"H":[],"I":[],"J":[],"K":[],"L":[],"M":[],"N":[],"O":[],"P":[],"Q":[],"R":[],"S":[{"name":"Sullivan","id":23},{"name":"Sven","id":26}],"T":[],"U":[],"V":[],"W":[],"X":[],"Y":[],"Z":[],"#":[]}

我需要根據對象name編寫一個有angular js filter 。 我想在用戶每次輸入新字符時顯示一個結果。

為此，我創建了此filter ：

app.filter('alphabeticSearch', function () {
    return function (obj,query) {
                if (!query) {
        return obj;
    }
    var filtered = {};
    for (var i = 65; i < 91; i++) {
        filtered[String.fromCharCode(i)] = [];
    }
    filtered['#'] = [];
    for (i in obj) {
        var _this = obj[i];
        filtered[i] = _this.filter(function (ele) {
            var reg = new RegExp(query, "gi");
            return reg.test(ele.name);
        })
    }
    return filtered;
    };
});

但是angularjs拋出錯誤

[$rootScope:infdig] 10 $digest() iterations reached. Aborting!

這就是我使用HTML過濾器的方式

<input type='text' id='cSearch' ng-model='ent' value='' />
<div ng-repeat="(letter,obj) in item | alphabeticSearch:ent">
   ....
</div>

Answer 1

這是因為您的過濾器每次都針對相同的obj和query檢索新實例。

Angular會評估每個diggest中過濾器的表達式以發現變化，因此在每個diggest角度中，檢查過濾器的結果是什么，並且除非過濾器diggest某個參數發生了變化，否則期望結果為相同。 您可能會認為過濾器的代碼每次都在檢索完全相同的事物，但事實並非如此，因為您的函數每次都在創建一個新實例，並且使angular認為事物是不相同的，因此它嘗試重新檢索-再次評估以便從過濾器函數獲得一致的響應，但是您的函數正在再次檢索新對象，因此angular再次嘗試...並且當這種情況發生10次時，angular中止該過程並引發異常。

更改過濾器中的一些內容可以解決此問題：

app.filter('alphabeticSearch', function () {
    var filtered = {};
    var lastObj={};
    var lastQuery="";
    return function (obj,query) {
       if (!query) 
           return obj;
        if(angular.equals(obj, lastObj) && angular.equals(query,lastQuery))
            return filtered;

        lastObj = angular.copy(obj);
        lastQuery = angular.copy(query);
        filtered={};
        for (var i = 65; i < 91; i++) {
            filtered[String.fromCharCode(i)] = [];
        }
        filtered['#'] = [];
        for (i in obj) {
            var _this = obj[i];
            filtered[i] = _this.filter(function (ele) {
                var reg = new RegExp(query, "gi");
                return reg.test(ele.name);
            })
        }
        return filtered;
    };
});