过滤器如何在AngularJS中工作？

Question

我有一个生成的表ng-repeat(来自对象的数组).

我想用搜索文本字段过滤它.

我的数组中包含的对象具有深层属性.

我不知道为什么以及如何,但过滤器只适用于电子邮件领域,这与其他属性一样深.

我正在使用此搜索表单:

<input type="text" name="search" ng-model="searchText" />
...
<tr ng-repeat="x in obj | filter:searchText track by $index">
  ...
</tr>

plunker

编辑:

这个答案有助于我理解为什么它不起作用.有人知道我如何绕过过滤器中的$验证？

我正在使用$,因为我正在使用Google Contact API格式.

Answer 1

你可以在这里检查ngFilter的源代码 它被设置为忽略以$开头的密钥,因为它是AngularJS用于公共($)和私有($$)属性的前缀.

Answer 2

email有效是因为嵌套属性address不包含任何$字符。

不幸的是，我认为没有办法绕过这种行为，但是您可以制作自己的过滤器并在ng-repeat.

这是一个应该适合您的简单示例：

JS

app.filter('customFilter', function() {
  return function(items, keyword) {
    if (!keyword || keyword.length === 0) return items;

    return items.filter(function(item){
      var phrase = keyword.$.toLowerCase();
      return item.gd$name.gd$fullName.$t.toLowerCase().includes(phrase) || 
        item.gd$name.gd$familyName.$t.toLowerCase().includes(phrase) || 
        item.gd$name.gd$givenName.$t.toLowerCase().includes(phrase) ||
        item.gd$email[0].address.toLowerCase().includes(phrase) ||
        item.gd$phoneNumber[0].$t.toLowerCase().includes(phrase) ||
        (!!item.gd$organization[0].gd$orgTitle && item.gd$organization[0].gd$orgTitle.$t.toLowerCase().includes(phrase)) ||
        (!!item.gd$organization[0].gd$orgName && item.gd$organization[0].gd$orgName.$t.toLowerCase().includes(phrase));
    });
  }
});

超文本标记语言

<tr ng-repeat="x in obj | customFilter:searchText">

当然，您必须添加更多检查以防止可能的情况null值添加更多检查。我只是想让它对您提供的数据起作用。

希望您会发现它很有用。

这里是plunk