Пример сравнения угловых функциональных фильтров

Question

Может ли кто-нибудь дать мне пример того, как использовать Угловой фильтр-компаратор?

Из официального дока:

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

Существует большой блог говорить о Угловом фильтре: Fun with AngularJS filters - Part 1: the filter filter

Однако, в конце его, где я искал какую-нибудь полезные, например функцию компаратора, я до сих пор ничего не нашел.

Для более конкретных требований соответствия вы можете передать функцию вместо логического значения в качестве аргумента компаратора.

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

Answer 1

Я сделал что-то подобное, поскольку Угловая итерация объектов и пытается сравнить их как целые, так и рекурсивно с их индивидуальными свойствами.

// in your controller 
 
$scope.filterMyData = function (input, search_param) { 
 
    if (input && input.propertyWeCareAbout) { 
 
    // it's ugly, but to quickly get something done you can ignore search_param 
 
    return input.propertyWeCareAbout === $scope.SomeOtherData; 
 
    } 
 
    else { 
 
    return angular.equals(input, search_param); 
 
    } 
 
}

<span>Quick search: </span><input type="search" ng-model='quickSearch'/><br/> 
 

 

 
<table> 
 
    <tr ng-repeat="obj in someHttpService.dataAsArray | filter:quickSearch:filterMyData"> 
 
    <td>{{ obj.key }} </td> 
 
    <td>{{ obj.propertyWeCareAbout }}</td> 
 
    </tr> 
 
</table>

В моем случае "автофургон" в значительной степени бессмысленно, и фильтрование было сделано по другой логике. Вы всегда можете просто сцепить другой фильтр в конце, добавив «| фильтр: quickSearch» в ng-repeat.

Answer 2

ПОДРОБНОЕ ОПИСАНИЕ НА КАК filter : expression : comparator Работы.

Это синтаксис фильтра:

data | filter: expression : comparator 

В AngularJS встроенных filter функции обеспечивает не случай поиск чувствительной подстроки на данных, которые он проходит, сравнивая против expression, когда выражение является строкой или свойство объекта, подверженного фильтру. comparator дает вам возможность дальнейшего уточнения фильтра. Если вы просто укажете comparator как true, это гарантирует, что возвращаются только те товары, которые точно соответствуют expression. Более гибкий подход заключается в том, чтобы указать comparator как функцию, которая возвращает predicate function.

Примеры

со следующими данными, экспонированных в вид-х $scope как люди:

var people = [ 
    {name:'John Jones',location:'Peterborough'}, 
    {name:'Angela Atkinson',location:'Jersey'}, 
    {name:'Peter Peterjon',location:'Attleborough'} 
]; 

Мы создали простую форму ввода поиска по мнению, которое мы будем давать в качестве параметр выражение фильтра:

<input type="text" ng-model="searchText" placeholder="Search People"> 

1) БЕЗ КОМПАРАТОРА

Результаты поиска будут выводиться, где мы вызываем фильтр:

<p ng-repeat="person in people | filter : searchText">{{person.name}} {{person.location}}</p> 

Если мы вводим «J» в поле поиска, потому что все записи имеют РЖ где-то, результат все равно будет показывать все 3 записи.

Демо: https://plnkr.co/edit/VID2CAKvUI5mjgKLImaI?p=preview

2) С КОМПАРАТОРА AS true

<p ng-repeat="person in people | filter : searchText : true">{{person.name}} {{person.location}}</p> 

Typing 'J' не покажет никаких результатов, поскольку нет никакого поля, которое точно J. Мы получим только если выполнено одно из следующих условий (с учетом регистра):

• John Jones
• Питерборо
• Анжела Аткинсон
• Джерси
• Питер Peterjon
• Эттлборо

Демонстрация: https://plnkr.co/edit/hhw2u03egXsUo7IyGc1w?p=preview

3) С КОМПАРАТОРА КАК function

Мы присоединим пользовательский компаратор predicate function под названием customComparator к контроллеру $scope. Я установил его для полного соответствия, но он больше не чувствителен к регистру. Мы используем его следующим образом:

<p ng-repeat="person in people | filter : searchText : customComparator">{{person.name}} {{person.location}}</p> 

Демо: https://plnkr.co/edit/Iy9r9bLQQdzefuzUv0TD?p=preview

4) CUSTOM ФИЛЬТР

Вместо того чтобы использовать встроенный в filter с экспрессией и компаратора мы можем просто создать пользовательский фильтр и трубы | в это.Такой пользовательский фильтр, который делает точно так же, как С КОМПАРАТОРА AS function выше может выглядеть следующим образом:

.filter('customFilter',[function() { 

    var customFilter = function(arr,searchText){ 

     if(! searchText) 
     return arr; 

     return arr.filter(function(arrayItem){ 

      var match = false; 

      for(var key in arrayItem) { 
       if(! arrayItem.hasOwnProperty(key) || key === '$$hashKey') 
       continue; 

       if(arrayItem[key].toLowerCase() === searchText.toLowerCase()) { 
       match = true; 
       break; 
       } 
      } 

      return match; 

     }); 
    }; 

    return customFilter; 

}]) 

, и она будет использоваться следующим образом:

<p ng-repeat="person in people | customFilter : searchText">{{person.name}} from {{person.location}}</p> 

Обратите внимание, что этот синтаксис не является expression : comparator. Вместо этого это customFilter : filterArgument.

Демо: https://plnkr.co/edit/wWT3cjfy7867WUSqqSKj?p=preview