How to filter an array of objects based on an array of a specific object propert?

Question

Here is a small example of my html using ng-repeat:

<div ng-repeat="item in vm.templateList | filter: vm.myFilter">
   <h3>{{item.Code}}</h3>
</div>

In Js file the vm.templateList is as followed(as an example):

vm.templateList = [{Code: 'a', ID: 1}, 
                   {code: 'a', ID: 2},
                   {code: 'b', ID: 3},
                   {code: 'c', ID: 4}];

Imagine I want to filter this list for all items that have ID 1 and also items that have ID 2.

What I originaly was doing was like this:

vm.filter = {ID: 1};

But this was I can only filter the list on 1 ID. Can anyone suggest a way?

You can create a custom filter

Yaron Schwimmer
– Yaron Schwimmer

2017-01-10 15:55:10 +00:00
Commented Jan 10, 2017 at 15:55 — Yaron Schwimmer
– Yaron Schwimmer, Commented Jan 10, 2017 at 15:55

M0nst3R · Accepted Answer · 2017-01-10 16:43:14Z

3

You can add the following AngularJS filter to your application :

// add a custom filter to your module
angular.module('MyModule').filter('myFilter', function() {
    // the filter takes an additional input filterIDs
    return function(inputArray, filterIDs) {
        // filter your original array to return only the objects that
        // have their ID in the filterIDs array
        return inputArray.filter(function (entry) {
            return this.indexOf(entry.ID) !== -1;
        }, filterIDs); // filterIDs here is what "this" is referencing in the line above
    };
});

You then declare your filter array in the controller as such :

vm.IDs = [1, 2];

Then your view should look like this :

<div ng-repeat="item in vm.templateList | myFilter: vm.IDs">
    <h3>{{item.Code}}</h3>
</div>

answered Jan 10, 2017 at 16:43

M0nst3R

5,3131 gold badge28 silver badges39 bronze badges

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

Comments

Yoan · Accepted Answer · 2017-01-10 16:43:26Z

2

You can use something like:

html:

<section>
    <div ng-repeat="item in vm.templateList | filter:checkFilterOptions">
       <h3>{{item.Code}}</h3>
    </div>
</section>

Js:

    $scope.vm = {};
    $scope.vm.templateList = [
                    {Code: 'a', ID: 1},
                    {Code: 'a', ID: 2},
                    {Code: 'b', ID: 3},
                    {Code: 'c', ID: 4}
                    ];

    $scope.filterOptions = [1,2,3];

    $scope.checkFilterOptions = function(value, index) {
      return value.ID && $scope.filterOptions.indexOf(value.ID) !== -1;
    }

answered Jan 10, 2017 at 16:43

Yoan

2,2171 gold badge14 silver badges21 bronze badges

Collectives™ on Stack Overflow

How to filter an array of objects based on an array of a specific object propert?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related