如何使用 AngularJS 对多个对象应用过滤器？

Posted 2023-02-22

【中文标题】如何使用 AngularJS 对多个对象应用过滤器？

【英文标题】：How to apply a filter on multiple objects using AngularJS?

【发布时间】：2012-11-29 20:36:38

【问题描述】：

我的用户对象定义如下。

$scope.users = [id: 1, name: 'Adam', friends: [name: 'John', age: 21, sex: 'M', name: 'Brad', age: 32, sex: 'M']]

然后我有以下代码：

<div ng-repeat="user in users>
 <input type="text" ng-model="searchText">
 <div ng-repeat="friend in user.friends | filter:searchText">
  user.name friend.name friend.age
 </div>
</div>

现在，当我在文本框中输入文本：“searchText”时，我希望过滤器显示用户的姓名和朋友的姓名/年龄。谁能帮助我如何做到这一点？

如果我是正确的，那么我认为我需要为此创建一个自定义过滤器，或者有其他方法可以实现吗？

【参考方案1】：

因为您想同时过滤两件事 - 朋友数组的一些属性以及用户 - 您需要创建自己的 custom filter 接受 2 个附加参数：

myApp.filter('myFilter', function() 
  return function(friends, searchText, username) 
    var searchRegx = new RegExp(searchText, "i");
    if ((searchText == undefined) || (username.search(searchRegx) != -1)) 
        return friends;
    
    var result = [];
    for(i = 0; i < friends.length; i++) 
        if (friends[i].name.search(searchRegx) != -1 || 
            friends[i].age.toString().search(searchText) != -1) 
            result.push(friends[i]);
        
    
    return result;
  
);

然后这样称呼它：

<div ng-repeat="user in users">
   <input type="text" ng-model="searchText">
   <div ng-repeat="friend in user.friends | myFilter:searchText:user.name">
      user.name friend.name friend.age
    </div>
</div>

":searchText:user.name" 是您将附加参数传递给自定义过滤器的方式。

Fiddle.

【讨论】：

非常感谢马克！但是这个 filterFilter(friends, searchText) 将过滤朋友的所有对象，即姓名、年龄和性别，或者只过滤姓名和年龄。我的要求是我只希望“姓名”和“年龄”是可搜索的，并且只能在这两个朋友对象上过滤结果，因为这些是显示的字段而不是“性别”

我意识到这是多少岁...但是当我的输入的“searchText”在过滤器中始终未定义时会发生什么？范围界定问题，很明显，但为什么呢？

@Clever，我建议您创建一个包含 html 和过滤器的新问题。

这对我很有帮助，谢谢！唯一需要注意的是，我乍一看错过的是，当您在 ng-repeat 参数中指定过滤器时，请确保将通常的“过滤器：”替换为过滤器的名称（又名“myFilter：参数2>“）。此外，不是 100% 确定您在返回函数的第一行中在做什么，检查 searchText 中的字母“i”。我的解决方案中不需要它，所以我把它拿出来了。

@shaunpickford，“i”是RegExp flag，意思是“忽略大小写”。

【参考方案2】：

http://docs.angularjs.org/api/ng.filter:filter

<div ng-repeat="user in users>
 <input type="text" ng-model="search.$">
 <div ng-repeat="friend in user.friends | filter:search">
  user.name friend.name friend.age
 </div>
</div>

【讨论】：

感谢 fastreload！这有帮助！但是这将过滤的对象是什么？此过滤器是否只过滤用户名和朋友的姓名和年龄？

如文档中所述，它将在对象数组中搜索对象的所有属性。您可以将$ 视为一个神奇的通配符。

感谢 fastreload！在我的朋友对象中，我具有三个属性：姓名、年龄和性别。但我不希望性别可搜索。有什么办法可以实现吗？

您需要创建一个函数，该函数接受数组中的一个元素并根据您的需要结果为真/假，并将函数名称作为filters 参数传递。 “函数：谓词函数可用于编写任意过滤器。为数组的每个元素调用该函数。最终结果是谓词返回 true 的那些元素的数组。”