javascript - 如何对对象的多个属性使用 Angular 过滤器

Question

我有一个像这样的简单的 ng-repeat:

<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;
        }

我不明白的是为什么我在 contains 函数中得到一个 tenant.name 而不是 tenant 本身。我知道对于一个简单的案例我可以做一些像 filter | {名称:vm.filter} | vm.contains，但是如果我想根据多个属性(例如姓名、电话等)进行过滤怎么办

Answer 1

What I do not understand is why I get a tenant.name in the contains function instead of the tenant itself.

发生的事情是 Angular 正在为对象的所有级别提供比较器，以尝试进行深度过滤，即它尝试将您的过滤器与对象中的所有层次级别相匹配。如果您控制台记录所有值，您将看到您也获得了完整的对象(在所有属性之后)。

---

使这项工作可行的一种方法是

...
<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/