如何在对象的多个属性上使用角度过滤器

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 | {name: vm.filter} | vm.contains 之类的操作，但如果我想基于多个属性（例如姓名、电话等）进行过滤，该怎么办

Answer 1

我不明白为什么我在 contains 中得到了一个tenant.name 函数而不是租户本身。

发生的情况是 Angular 提供了对象的所有级别的比较器，以尝试进行深度过滤，即它尝试将您的过滤器与对象中的所有层次结构级别匹配。如果你 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;
  }
}
...

---

小提琴 - https://jsfiddle.net/81384sd7/

Answer 2

您可以使用对象来存储要应用的过滤器。例如：

$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

我希望这会有所帮助。

Answer 3

您需要测试这两个条件是否存在，如果两者都存在则返回值。像这样的：

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