Как использовать угловой фильтр по нескольким свойствам объекта

Question

у меня есть простой нг-повторить подобное:

<input type="text" ng-model="vm.filter"> 

<div ng-repeat="tenant in vm.tenants | filter : vm.filter : vm.contains"> 
</div> 

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

function contains(actual, expected) { 
      return actual.name.indexOf(expected) >= 0; 
     } 

То, что я не понимаю, почему я получаю tenant.name в содержит функцию вместо самого tenant. Я знаю, что для простого случая я могу сделать что-то вроде filter | {name: vm.filter} | vm.contains, но что делать, если я хочу сделать фильтрацию на основе нескольких свойств (например, имя, телефон и т. Д.)

Answer 1

То, что я не понимаю, - это то, почему я получаю tenant.name в функции вместо самого арендатора.

Что происходит, так это то, что угловой обеспечивает компаратор на всех уровнях объекта в попытке сделать глубокую фильтрацию, то есть пытается сопоставить ваш фильтр со всеми уровнями иерархии в объекте. Если вы выполните console.log все значения, вы увидите, что вы также получите полный объект (после всех свойств).

---

Один из способов сделать эту работу было бы что-то вроде

... 
<div ng-repeat="tenant in vm.tenants | filter : vm.contains(vm.filter)"> 
... 

, а затем

... 
contains: function(filter) { 
    return function(tenant) { 
    return tenant.name.indexOf(filter) !== -1; 
    } 
} 
... 

---

Fiddle - https://jsfiddle.net/81384sd7/

Answer 2

Вам нужно проверить наличие обоих этих условий и вернуть значение, если они присутствуют. Что-то вроде этого:

function contains(actual, expected) { 
    if (actual.name.indexOf(expected) >= 0 && actual.phone.indexOf(expected) >= 0) { 
    return actual; 
    } 
} 

Answer 3

Вы можете использовать объект для хранения фильтров, которые хотите применить. Например:

$scope.filterBy = { 
    name: "Bob", 
    phone: "07" 
}; 

Затем настройте поля для редактирования фильтров:

<input type="text" ng-model="filterBy.name" /> 
<input type="text" ng-model="filterBy.phone" /> 

Тогда просто фильтровать по этому объекту.

<div ng-repeat="tenant in vm.tenants | filter : filterBy"> 

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

Applying a angularjs filter after "Apply" button click

Я надеюсь, это помогает.