Множество фильтров AngularJS

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"> 

который фильтрует по всем полям элемента (идентификатор, имя , ... и т.д).

Я хочу фильтровать один и тот же путь, но с использованием нескольких фильтров, которые также фильтруют все поля. Таким образом, пользователь может помнить сегменты из имени, поэтому он вводит много сегментов из названия, а затем он может помнить сегмент из комментариев и так далее.

Я нашел этот путь:

<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. Это позволяет легко проверить, остались ли какие-либо элементы после фильтрации. Вы можете отобразить сообщение, например «Нет элементов», если !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>