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

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

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

$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 2

  

我不明白为什么我在包含中获得了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;
  }
}
...

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

Answer 3

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

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