2016-01-04 3 views
1

У меня есть нг-повторить элементУгловой фильтр несколькими свойствами

Мой единственный элемент содержит некоторые свойства

{ 
name: 'full name', 
email: '[email protected]', 
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> 

ответ

2

Согласно documentation вы должны использовать

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

Это абсолютно здорово !!! – 24sharon

1

Вы должны вход для имени, почты и PARTNER_NAME, и вы можете использовать фильтр, как это:

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

Вы можете написать настраиваемый фильтр, который будет применять любую необходимую логику поиска:

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

Попробуйте использовать:

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

размещение полей в трех фильтрах, как указано в документации AngularJS. {{ expression | filter1 | filter2 }}

Смежные вопросы