【问题标题】:Custom filter in AngularJS after adding pagination添加分页后AngularJS中的自定义过滤器
【发布时间】:2013-04-16 06:21:36
【问题描述】:

在对我的 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 ... >

我需要此过滤器来按多种语言进行搜索(选择两种或多种语言)。 如果我将 data in filtered = (list | filter:search) 替换为 data in list,您会发现它正在工作。但我的分页需要过滤

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

【问题讨论】:

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


    【解决方案1】:

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

    我重写了您的自定义过滤器。它并不完全是面向对象的,但稍加修饰它可能会更具可扩展性。基本上,您只需要比基本角度过滤器更具包容性的东西。

    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/

    【讨论】:

    • 看起来很有希望。这是一个带有有效 js 引用的更新小提琴(原始文件产生了错误)。 jsfiddle.net/YaQK2
    【解决方案2】:

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

    // 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()"
    

    希望这会有所帮助!

    【讨论】:

    • 嗯,好吧...你能叉我的小提琴吗?我试过你的代码,但不知道如何使用它。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-11-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-04-03
    • 2017-08-15
    相关资源
    最近更新 更多