由多个属性角度滤波

Question

我有一个NG-repeat元素

我的单元素包含一些属性

{ 
name: 'full name', 
email: 'aaa@bbb.cc', 
partner_name: 'partner' 
} 

我想在各个领域搜索单个搜索。 用户可以键入电子邮件或伙伴名称或名称。

我的代码：

<div class="row"> 
<div class="col-xs-12"> <input type="text" ng-model="search.name" 
       placeholder="Quick Search user" 
       class="form-control" ></div> 
</div> 
</div> 
<div ng-repeat="el in contacts | filter:search" class='partner-panel animate-repeat'> 
    <div class="alert " ng-class="css" > 
     <div class="name"> 
      (<span ng-bind="el.id"> </span>) <span ng-bind="el.name"></span> 
     </div> 
     <div ng-bind="el.email"> 
     </div> 
     <div ng-bind="el.partner_name"> 
     </div> 

</div> 

Answer 1

按照documentation你应该使用

<input ng-model="search.$"> 

Answer 2

您需要的姓名，电子邮件和合作伙伴名称输入，你可以使用过滤器这样的：

ng-repeat="el in contacts | filter:{name: search.name, email: search.mail, partner_name: search.partner}" 

Answer 3

你可以编写一个自定义过滤器来应用你需要的任何搜索逻辑：

app.filter('myFilter', function() { 
    return function(contacts, search) { 
     if (!search) { 
      return contacts; 
     } 

     // search.name will contain the input entered in the field  
     var searchRegex = new RegExp(search.name, 'i'); 
     return contacts.filter(function(item) { 
      // look for match in name or email properties of the contact 
      return searchRegex.test(item.name) || searchRegex.test(item.email); 
     }); 
    }; 
}); 

然后：

<div ng-repeat="el in contacts | myFilter:search"> 

这种方式，你可以有一个单一的搜索框将考虑接触模型的不同属性：

<input type="text" 
     ng-model="search.name" 
     placeholder="Quick Search user" 
     class="form-control" /> 

Answer 4

尝试使用：

ng-repeat="el in contacts | filter1 | filter2 | filter3"

将字段放置在三个过滤器中，如AngularJS文档中记录的 {{ expression | filter1 | filter2 }}