I am trying to filter nested objects in ng-repeat by using a search textbox.

Given the following object:

$scope.items = {
    "1": {
        name: "First Item",
        tag: "first"
    },
    "2": {
        name: "Second Item",
        tag: "second"
    }
};

I want to do something like this:

<input type="text" name="serchBox" ng-model="searchByName">
<p ng-repeat="(key, values) in items | filter:{name: searchByName}">
    Using both {{key}} and {{values.name}}
</p>

This is indeed not working. I tried a lot of things and I couldn't make it work properly. I don't want to change my object. I was searching a lot but I didn't find anything that fits my needings.

I am trying to filter nested objects in ng-repeat by using a search textbox.

Given the following object:

$scope.items = {
    "1": {
        name: "First Item",
        tag: "first"
    },
    "2": {
        name: "Second Item",
        tag: "second"
    }
};

I want to do something like this:

<input type="text" name="serchBox" ng-model="searchByName">
<p ng-repeat="(key, values) in items | filter:{name: searchByName}">
    Using both {{key}} and {{values.name}}
</p>

This is indeed not working. I tried a lot of things and I couldn't make it work properly. I don't want to change my object. I was searching a lot but I didn't find anything that fits my needings.

• javascript
• angularjs
• object
• angularjs-ng-repeat
• angularjs-filter

2 Answers 2

I've finally got the answer to my own question.

I only had to create my own filter and check if the properties inside the object have the desired value by using regular expressions:

app.filter('customSearchFilter', function() {
return function(input, term) {
    var regex = new RegExp(term || '', 'i');
    var obj = {};
    angular.forEach(input, function(v, i){
      if(regex.test(v.name + '')){
        obj[i]=v;
      }
    });
    return obj;
  };
});

And apply it in the HTML this way:

<input type="text" ng-model="searchName" />
<ul>      
  <li ng-repeat="(key, val) in items | customSearchFilter:searchName">Both {{key}} and {{val.name}}</li>
</ul>

I created this Plunker to show my solution in action

If you don't need to reuse your filter anywhere else, you can write your filtering function in controller.

scope.customSearchFilter = function(term){
    return function(item) {
        var regex = new RegExp(term || '', 'i');
        return regex.test(item.name + '');
    };
};

Filter argument is a single item, not an array.

Here is examples. 1st variant is with model, and 2nd with plain scope:

https://plnkr.co/edit/ELH8S5GymG8cHfOJqD9G