Question

我有这个plunker如何在各自的输入中显示所有搜索？

这是代码

<input type="text" ng-model="search" placeholder="search name, age or gender"><br/>
<input type="text" ng-model="name.name" placeholder="search name"><br/>
<input type="text" ng-model="age.age" placeholder="search age"><br/>
<input type="text" ng-model="gender.gender" placeholder="search gender"><br/>
<ul>
  <li ng-repeat="item in list | filter:search | filter:name | filter:age | filter: gender">
    {{item.name}}
    {{item.age}}
    {{item.gender}}
  </li>
</ul>

这是我到目前为止所尝试的

<ul>
  <li ng-repeat="item in list | (filter:search || filter:name || filter:age || filter: gender")>
    {{item.name}}
    {{item.age}}
    {{item.gender}}
  </li>
</ul>

我已经阅读了this但它的复选框，但我喜欢这样的输入。

Answer 1

很遗憾，您所需的过滤器过于复杂，因此您应该创建customFilter：

angular.module('plunker', []).controller('MainCtrl', function($scope) {
  $scope.list = [
    {name:'Jack Bauer', age:1, gender: 'male'},
    {name:'Chuck Norris', age: 2, gender: 'male'},
    {name:'Superwoman', age: 3, gender: 'female'},
    {name:'Batman', age: 4, gender: 'male'},
    {name:'Spiderman', age: 5, gender: 'male'},
    {name:'Hulk', age: 6, gender: 'male'}
  ];
  $scope.search = {};

}).filter('customFilter', function(){
  return function(data, search){
    var common = search.common;    
    var allEmpty = !common;
    
    return data.filter(function(x){            
      for(var prop in x){
        if(prop != '$$hashKey'){
          var self = x[prop];
          if(self){
            var input = search[prop];
            allEmpty = allEmpty && !input;
            self = self.toString();
            if((input && self.indexOf(input) != -1)
                || 
               (common && self.indexOf(common) != -1))
              return true; 
          }
        }
      }      
      return allEmpty;
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>

<body ng-app="plunker" ng-controller="MainCtrl">
  <input type="text" ng-model="search.common" placeholder="search name, age or gender">
  <br/>
  <input type="text" ng-model="search.name" placeholder="search name"><br/>
  <input type="text" ng-model="search.age" placeholder="search age"><br/>
  <input type="text" ng-model="search.gender" placeholder="search gender"><br/>
  <ul>
    <li ng-repeat="item in list | customFilter:search">
      {{item.name}}
      {{item.age}}
      {{item.gender}}
    </li>
  </ul>
</body>

多个过滤值OR运算

1 个答案: