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

我有用户对象定义如下。如何使用AngularJS将过滤器应用于多个对象？

$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”，我希望该过滤器显示用户名和名称/朋友的年龄。任何人都可以帮助我如何做到这一点？

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

来源

2012-12-12 Sabarish Sankar

因为你想在一次两件事过滤 - 朋友阵列的一些特性，也是用户 - 你需要创建自己的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。

来源

2012-12-12 17:18:33

非常感谢Mark！但是这个filterFilter（friends，searchText）会过滤所有的朋友对象，即姓名，年龄和性别，或者只是名字和年龄。我的要求是我只想'名称'和'年龄'是可搜索的，并且结果仅在朋友的这两个对象上被过滤，因为那些字段被显示而不是'性' –

查看更新的答案。 –

我意识到这是多少年......但是当我的输入的'searchText'在滤镜内部总是未定义时会发生什么？很明显，范围问题显而易见，但为什么？ – Clev3r

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>

来源

2012-12-12 08:24:31

感谢fastreload！这有帮助！但是这个过滤器的目的是什么？这个过滤器只会**用户名**和**朋友的姓名和年龄**吗？ –

如文档中所述，它将搜索对象数组内的对象的所有属性。你可以把'$'想象成一个神奇的通配符。 –

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

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

回答

相关问题