添加分页后,AngularJS中的自定义过滤器

时间:2013-04-23 06:33:32

标签: javascript filter angularjs pagination angularjs-ng-repeat

对我的ng-repeat列表(Update pagination in AngularJS after filtering

实施分页后
<li ng-repeat="data in filtered = (list | filter:search) ... >

我的自定义过滤器现在出现了问题

<li ng-repeat="data in filtered = (list | filter:search) | customFilter:search ... >

我需要此过滤器来搜索多种语言(选择两种或更多种语言)。 如果我用列表中的数据替换filter =(list | filter:search)中的数据,您将看到它正在运行。但我的分页需要过滤

jsFiddle:http://jsfiddle.net/StinsonMaster/SuEX6/4/(基于the fiddle from the previous thread

2 个答案:

答案 0 :(得分:0)

我建议,不要在ng-repeat指令中使用表达式,而是将ng-repeat设置为列表的constroller上的一个方法,该方法返回您要查找的子集。例如:

// In your controller

        $scope.filteredList = function() {
           return $filter('filter')($scope.list,{'language':search.language});
        }

// And in your ng-repeat 

        ng-repeat="(key,val) in filteredList()"

希望这有帮助!

答案 1 :(得分:0)

我想我误解了你原来的问题。

我重新编写了自定义过滤器。它并不是完全面向对象的,但稍微提一下它可以更加可扩展。基本上你只需要比基本角度滤波器更具包容性的东西。

app.filter("customFilter", function() {
    return function(input, search) {
        if(search && search != undefined) {
            var _toRet = new Array();
            for(var i in search) {
                for(var k in input) {
                    if(search.indexOf(input[k].language) != -1 && _toRet.indexOf(input[k]) == -1) {
                        _toRet.push(input[k]);
                    }
                }
            }
            return _toRet;
        } else {
            return input;
        }
    };
});

另请注意ngRepeat语法的更改。

ng-repeat="data in filtered = list | filter:search.name | customFilter:search.language | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit"

http://jsfiddle.net/doublekid/5Bs3h/