How can I filter a string array in ng-repeat with another string array?

Question

I have a select element that I want to filter:

<select multiple="multiple" class="span2" data-ng-model="selectedParameters">
    <option data-ng-repeat="parameter in availableParameters">
        {{parameter}}
    </option>
</select>

"availableParameters" is a string array that I can reach from here without problem, and "selectedParameters" is another string array that represents the selected elements in the UI.

availableParameters = ["AAA", "BBB", "CCC", "DDD"];

I have another string array under object graph (accessible inside the HTML)

graph.parameters = ["AAA", "BBB"];

I am trying to filter "availableParameters" by "graph.parameters" and obtain a list like this: "CCC", "DDD"

I checked AngularJS's documentation but couldn't see an example for my problem.

All I could do is something like this:

<option data-ng-repeat="parameter in availableParameters | filter: !graph.parameters ">{{parameter}}</option>

Kristiyan Kostadinov · Accepted Answer · 2015-12-09 11:06:28Z

3

You can make a custom filter to filter out all of the items that aren't in graph.parameters:

angular.module('yourModuleNameHere').filter('params', [function(){
    return function (items, filterBy) {
      return items.filter(function(currentItem){
        return filterBy.indexOf(currentItem) === -1;
      });
    };
}]);

Afterwards you can use it as:

<select multiple="multiple" class="span2" data-ng-model="selectedParameters">
    <option data-ng-repeat="parameter in availableParameters | params:graph.parameters">
        {{parameter}}
    </option>
</select>

edited Dec 9, 2015 at 11:06

answered Dec 9, 2015 at 11:01

Kristiyan Kostadinov

3,7124 gold badges32 silver badges52 bronze badges

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

Comments

Hitmands · Accepted Answer · 2015-12-09 11:07:03Z

1

You can do it in many ways, a filter is useful when the data can change but I think that isn't your case, you just need to add a simple business login in your controller... have a look on what follows:

var rawlist = ['foo', 'baz', 'bar'];
var blacklist = ['baz'];

var list = rawlist.filter(function(item) {
  return blacklist.indexOf(item) < 0;
});

console.log('available parameters are', list);

so, your view can be:

<select ng-model="someScopeProperty" ng-options="item for item in list track by $index"></select>

answered Dec 9, 2015 at 11:07

Hitmands

14.2k4 gold badges41 silver badges78 bronze badges

Collectives™ on Stack Overflow

How can I filter a string array in ng-repeat with another string array?

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