Question

我想使用多个过滤器过滤我的列表项目。

这就是我填写项目列表的方法（使用Django）：

<script type="text/javascript">
    ngApp.controller('FilterInputCtrl', function ($scope, $rootScope) {
        $scope.items1 = [];
        {% for cross in crosses%}

            $scope.items.push
            ({
                id:{{ cross.id }},
                name: '{{ cross.name }}',
                comments: '{{ cross.comments }}',                  
                aliases: '{{ cross.print_lines_aliases }}',                   
            });

        {% endfor %}
    });

</script>

一个过滤器代码如下：

<li ng-repeat="cross in items | filter:myFilter">

过滤所有项目的字段（id，name，...等）。

我想以相同的方式过滤，但也使用过滤所有字段的多个过滤器。因此，用户可以从名称中记住片段，以便从名称中输入许多片段，然后他可以记住评论中的片段，等等。

我发现了这种方式：

<li ng-repeat="cross in items | filter:{ name: filter1, lines: filter2, comments: filter3 }">

哪个工作正常，但现在每个过滤器都针对一个标准。问题是我不知道用户在搜索时会怎么想;也许他会搜索许多评论的部分！

我正在寻找一种方法来应用许多过滤器，每个过滤器根据每个字段进行过滤，而不为每个过滤器指定单个字段。看起来像这样的东西：

<li ng-repeat="cross in items | filter:{filter1, filter2, filter3}">

Answer 1

<li ng-repeat="cross in filteredItems = (items | filter:filter1 | filter:filter2 | filter:filter3)">

如果你注意到，我创建了一个名为filteredItems的新范围变量。这样可以轻松检查过滤后是否还有任何项目。您可能希望显示一条消息，例如＆＃34;未找到任何项目＆＃34;如果!filteredItems.length。

E.g。

<div ng-hide="filteredItems.length" class="row">
    <div class="col-xs-10 col-sm-11 col-md-11">No items found</div>
</div>

Answer 2

var app =angular.module('app', []);

app.controller('mainController', function($scope) {
    // Data object
    $scope.servers = [
        {name:'ServerA', runlevel:'PAV', mode:'author', env:'intranet' },
        {name:'Server7', runlevel:'PAV', mode:'publish', env:'intranet'},
        {name:'Server2', runlevel:'PAV', mode:'publish', env:'intranet'},
        {name:'ServerB', runlevel:'PAV', mode:'publish', env:'internet'},
        {name:'ServerC', runlevel:'PAV', mode:'publish', env:'internet'},
        {name:'Server1', runlevel:'UAT', mode:'author', env:'intranet'},
        {name:'Server3', runlevel:'UAT', mode:'publish', env:'intranet'},
        {name:'Server4', runlevel:'UAT', mode:'publish', env:'internet'},
        {name:'ServerD', runlevel:'STA', mode:'author', env:'intranet'}, 
        {name:'ServerE', runlevel:'STA', mode:'publish', env:'intranet'}
    ];
    // Filter defaults
    $scope.Filter = new Object();
    $scope.Filter.runlevel = {'PAV':'PAV',
                            'UAT':'UAT',
                             'ST':'ST'
                        };
    $scope.Filter.mode = {'author':'author',
                            'publish':'publish'
                        };
    $scope.Filter.env = {'intranet':'intranet',
                            'internet':'internet'
                        };
    // Default order
    $scope.OrderFilter = 'runlevel';
});

// Global search filter
app.filter('searchFilter',function($filter) {
        return function(items,searchfilter) {
             var isSearchFilterEmpty = true;
              angular.forEach(searchfilter, function(searchstring) {   
                  if(searchstring !=null && searchstring !=""){
                      isSearchFilterEmpty= false;
                  }
              });
        if(!isSearchFilterEmpty){
                var result = [];  
                angular.forEach(items, function(item) {  
                    var isFound = false;
                     angular.forEach(item, function(term,key) {                         
                         if(term != null &&  !isFound){
                             term = term.toString();
                             term = term.toLowerCase();
                                angular.forEach(searchfilter, function(searchstring) {      
                                    searchstring = searchstring.toLowerCase();
                                    if(searchstring !="" && term.indexOf(searchstring) !=-1 && !isFound){
                                       result.push(item);
                                        isFound = true;
                                    }
                                });
                         }
                            });
                       });
            return result;
        }else{
        return items;
        }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app="app">
    <div  ng-controller="mainController">
        <h2>Runlevel</h2>
        <label>PAV</label>
        <input  type="checkbox" ng-model="Filter.runlevel.PAV" ng-true-value="PAV"  ng-false-value="!PAV" />&nbsp;
        <label>UAT</label>
        <input  type="checkbox" ng-model="Filter.runlevel.UAT" ng-true-value="UAT"  ng-false-value="!UAT" />&nbsp;
        <label>ST</label>
        <input  type="checkbox" ng-model="Filter.runlevel.ST" ng-true-value="ST"  ng-false-value="!ST"/>
        <hr />
        <h2>Runmode</h2>
        <label>Author</label>
        <input  type="checkbox" ng-model="Filter.mode.author" ng-true-value="author"  ng-false-value="!author" />&nbsp;
        <label>Publish</label>
        <input  type="checkbox" ng-model="Filter.mode.publish" ng-true-value="publish"  ng-false-value="!publish" />
        <hr />
        <h2>Environment</h2>
        <label>Intranet</label>
        <input  type="checkbox" ng-model="Filter.env.intranet" ng-true-value="intranet"  ng-false-value="!intranet" />&nbsp;
        <label>Internet</label>
        <input  type="checkbox" ng-model="Filter.env.internet" ng-true-value="internet"  ng-false-value="!internet" />
        <hr />
        <h2>Server list</h2>
        <table width="100%" cellpadding="5">
            <tr>
                <th ng-click="OrderFilter='name'">Name</th>
                <th ng-click="OrderFilter='runlevel'">Runlevel</th>
                <th ng-click="OrderFilter='mode'">Runmode</th>
                <th ng-click="OrderFilter='env'">Environment</th>
            </tr>
            <tr ng-repeat="server in servers | searchFilter:Filter.runlevel | searchFilter:Filter.mode | searchFilter:Filter.env | orderBy:OrderFilter">
                <td>{{server.name}}</td>
                <td>{{server.runlevel}}</td>
                <td>{{server.mode}}</td>
                <td>{{server.env}}</td>
            </tr>
        </table>
    </div>
</div>

AngularJS多重过滤器

2 个答案: