Подтвердить что ты не робот

Angular пример компаратора функционального фильтра

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

Из официального документа:

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

Существует отличное сообщение в блоге о фильтре Angular: Развлечения с фильтрами AngularJS - Часть 1: фильтр filter

Однако в конце этого, где я ищу полезный пример компаратора функций, я все еще ничего не нашел.

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

// in your controller
$scope.filterMyData = function (input, search_param) {
  if (input && input.propertyWeCareAbout) {
    // it 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>

Ответ 2

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

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

data | filter: expression : comparator

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

<сильные > Примеры

Со следующими данными, отображаемыми в представлении $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" в поле поиска, потому что все записи имеют j где-то, результат все равно покажет все 3 записи.

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

2) С COMPARATOR AS true

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

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

  • Джон Джонс
  • Питерборо
  • Анжела Аткинсон
  • Джерси
  • Питер Петерджон
  • Attleborough

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

3) С COMPARATOR AS function

Мы добавим функцию предиката