AngularJS ng-options filter by array value

Question

I need some help figuring out how I can use the AngularJS filter to only show the options that match my condition.

I have the below array.

var users = [
  {'id':0, 'name':'John',  'roles':['Admin']},
  {'id':1, 'name':'Alice', 'roles':['Admin', 'Tech']},
  {'id':2, 'name':'Sam':   'roles':['Tech']}
]

I render all the users on a <select> list with the below code. But I only want to show the users who's role is "Tech". I went through a few other answers on here but they all use the filter with an object, I'm trying this with an array.

<select data-ng-options="item.id as item.name for item in users"></select>

I've tried to only show the options with data-ng-if="item.roles.indexOf('Tech') > -1" on the <select> tag but that condition is never met so the dropdown is not shown at all (which makes sense).

I also tried to use data-ng-options="item.id as item.name for item in users | filter:{item.roles:'Tech'}" with the filter, but that fails with an AngularJS parse error.

Not sure how I can filter by array values.

NTP · Accepted Answer · 2019-03-06 06:57:38Z

2

Your logic in your last attempt is correct but you have a small syntax error. Try the following

<select ng-model="selectedValue" data-ng-options="item.id as item.name for item in users | filter: { roles: ('Tech') }"></select>

You can also create your own custom filter function for this

html

<select ng-model="selectedValue" data-ng-options="item.id as item.name for item in users | filter:customFilter"></select>

js

$scope.customFilter = function(row){
    if(row.roles.includes("Tech")){
        return true;
    }
    else{
        return false;
    }
}

Demo

answered Mar 6, 2019 at 6:57

NTP

4,4483 gold badges18 silver badges25 bronze badges

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

Collectives™ on Stack Overflow

AngularJS ng-options filter by array value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related