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

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本身得到了tenant.name 。 我知道在一个简单的情况下，我可以做类似filter | {name: vm.filter} | vm.contains filter | {name: vm.filter} | vm.contains 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">

看一下我以前的答案，它非常相似，除了还允许在使用按钮手动应用过滤器之前进行选择：

单击“应用”按钮后应用angularjs过滤器

我希望这有帮助。

Answer 2

我不明白的是为什么我在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 3

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

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