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.
2 Answers
Answers 1
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
Answers 2
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:
0 comments:
Post a Comment