Sabarish Sankar Sabarish Sankar - 4 months ago 11
Javascript Question

How to apply a filter on multiple objects using AngularJS?

I have the user object defined as below.

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

Then I have the following code:

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

Now when I type in the textbox the text: 'searchText', I want the filter to display the name of the user and the name/age of the friend. Can anyone help me with how to do this?

If I am correct, then I think that I need to create a custom filter for this or is there any other way I can accomplish this?


Because you want to filter on two things at once -- some properties of the friends array and also the user -- you'll need to create your own custom filter that accepts 2 additional parameters:

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

Then call it like so:

<div ng-repeat="user in users">
   <input type="text" ng-model="searchText">
   <div ng-repeat="friend in user.friends |">
      {{}} {{}} {{friend.age}}

"" is the way you pass additional arguments to a custom filter.