AngularJs - Filter an object only by certain fields in a custom filter

Question

I'm working on this codepen. The data comes from an array of objects, and I need to make a filter only by name and amount.

I have this code, but if you type a character in the search box, it only search by amount, and not by name too. In other words, if the you type 'warren' or '37.47' it has to return the same result, but doesn't works.

var filterFilter = $filter('filter');
 $scope.filter = {
 condition: ""
};
$scope.$watch('filter.condition',function(condition){
 $scope.filteredlist = filterFilter($scope.expenses,{name:condition} && {amount:condition});
 $scope.setPage();
});

Abhilash Augustine · Accepted Answer · 2015-10-22 11:53:59Z

1

You want to create a custom filter for your app.

directiveApp.filter("myFilter", function () {
    return function (input, searchText) {
        var filteredList = [];

        angular.forEach(input, function (val) {
            // Match exact name
            if (val.name == searchText) {
                filteredList.push(val);
            }
            // Match exact amount
            else if (val.amount == searchText) {
                filteredList.push(val);
            }
        });
        input = filteredList;
        return input;
    };
});

You can write your logic in this filter and now use this filter to filter your list.

Update

You can just implement this filter to your custom filter pagination.

Here is the new version of your code. Codepen

List of updates on your code

Added new filter parameter to your ng-repeat attribute

ng-repeat="expense in filteredlist | pagination: pagination.currentPage : numPerPage : filter.condition"
...

edited Oct 22, 2015 at 11:53

answered Oct 22, 2015 at 5:58

Abhilash Augustine

4,2081 gold badge26 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

robe007 Over a year ago

Thanks for your answer, but I updated my question with more specific explanation.

Abhilash Augustine Over a year ago

@robe007 sorry for the late reply. Please have a look at my answer. I didn't complete my answer. Sorry, I am in an urgent work.

Community · Accepted Answer · 2017-05-23 12:14:42Z

1

Well, finally (based in the idea of Abhilash P A and reading the docs), I solved my question in this way:

var filterFilter = $filter('filter');
   $scope.filter = {
     condition: ""
   };
   $scope.$watch('filter.condition',function(condition){
     $scope.filteredlist = filterFilter($scope.expenses,function(value, index, array){
        if (value.name.toLowerCase().indexOf(condition.toLowerCase()) >= 0 ) {
          return array;
        }
        else if (value.amount.indexOf(condition) >= 0 ) {
          return array;
        }
     });
     $scope.setPage();
   });

The final codepen ! (awsome)

edited May 23, 2017 at 12:14

CommunityBot

11 silver badge

answered Oct 22, 2015 at 16:58

robe007

4,0074 gold badges41 silver badges62 bronze badges

Collectives™ on Stack Overflow

AngularJs - Filter an object only by certain fields in a custom filter

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related