Thursday, 5 November 2015

angularjs apply filter to attribute of ng-repeat

Usually we do like this for using filter on ng-repeat:

<input type="text" ng-model="filterValue">
<li ng-repeat="i in data | filter:filterValue"> {{i | json }}</li>

That will apply the filter to all fields of the object,  if you type "a", it will show a person who's name is "apple" and another person with hobby "eat" :-)

If you want to just do filter to people's name, you should:

According to doc to do that:

<input type="text" ng-model="filterValue">
<li ng-repeat="i in data | filter:{name:filterValue}:true"> {{i | json }}</li>

The disadvantage of doing this is it will do strict matching,  which mean if the user types "a", "apple" will not apear until he/she types "apply".

To bring back "containning" matching, you should implement a function:

html :

<tr ng-repeat="activity in data | orderBy: '-date' | filter:{name : inputname}: matchfunction


        $scope.matchStoreId = function(actual, expected){
            if (expected == undefined || expected.length ==0) {
                return true;
            }else {
                return angular.equals(actual, expected);

If you want your filter apply to a sub object's property, you should:

<div ng-repeat="device in data | filter:{ name:{fistname : inputname} }:matchfunction

No comments:

Post a comment