2013-08-01 4 views
3

Я новичок в angularjs и просто хотел некоторую помощь фильтрации ...angularjs фильтрации несколько выражений

Я понимаю основы фильтрации (что очень простой), но то, что я хочу сделать, это фильтр, использующий несколько выражений.

HTML:

<body data-ng-init="phones = [{make:'Apple', model:'iPhone5'}, {make:'HTC', model:'One'}, {make:'Samsung', model:'GalaxyS4'}]"> 
    <p>my first angular app</p> 
    <p><label>filter</label><input data-ng-model="phoneFilter.$" type="text"></p> 
    <ul> 
     <li data-ng-repeat="phone in phones | filter:phoneFilter"> 
      {{phone.make}} {{phone.model}} 
     </li> 
    </ul> 
</body> 

Теперь, если я фильтр «яблоко» или «iPhone5» он работает хорошо, но если я типа «яблоко я», как только я начинаю вводить модель фильтра является пустым.

Нужно ли создать для этого специальный фильтр?

Приветствие

ответ

2

По крайней мере, вы не можете просто использовать основную форму фильтра filter, потому что AngularJS не может догадаться, что в одиночку пространство означает «или».

Но вам не нужно создавать свою собственную директиву. AngularJS 1.1.5 предоставляет третий параметр для filter (см. documentation). Он может принимать функцию, которая «будет иметь значение объекта и значение предиката для сравнения и должна возвращать значение true, если элемент должен быть включен в результат фильтрации». Тогда все, что вам нужно сделать, это:

$scope.multipleChoicesComparator = function (expected, actualInCompactForm) 
{ 
    // Get a list of predicates 
    var listActual = actualInCompactForm.split(' '); 
    var mustBeIncluded = false; 

    angular.forEach(listActual, function (actual) 
    { 
     // Search for a substring in the object value which match 
     // one of the predicate, in a case-insensitive manner 
     if (angular.lowercase(expected).indexOf(angular.lowercase(actual)) !== -1) 
     { 
      mustBeIncluded = true; 
     } 
    }); 

    return mustBeIncluded; 
}; 
<li data-ng-repeat="phone in phones | filter:phoneFilter:multipleChoicesComparator"> 
    {{phone.make}} {{phone.model}} 
</li> 

Fiddle

+0

спасибо, но как только я типа «я» в Iphone (после ввода яблоко) он исчезает из отфильтрованных результатов еще , – Adi

+0

Это не так, просто попробуйте Fiddle. Но третий параметр фильтра filter был введен в AngularJS 1.1.3, поэтому обязательно используйте хотя бы эту версию. – Blackhole

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