How to filter ng-options on AngularJS select?

Question

I have something like this,

<select ng-model="person"
        ng-options="person.name for person in mv.people">

Now the people array has some members that I want to hide. example:

{
   name: 'john',
   hide: true
}

How do I make sure these people aren't rendered as an option?

Have you tried to filter yet?

Nikolaus
– Nikolaus

2018-12-07 00:29:11 +00:00
Commented Dec 7, 2018 at 0:29 — Nikolaus
– Nikolaus, Commented Dec 7, 2018 at 0:29

Lex · Accepted Answer · 2018-12-07 00:33:19Z

2

You can apply a filter just as you would if you were using ng-repeat.

angular.module('app', [])
  .controller('ctrl', ($scope) => {
    $scope.persons = [{
      name: 'John',
      hide: true
    }, {
      name: 'Jane',
      hide: false
    }, {
      name: 'Jeff',
      hide: false
    }, {
      name: 'Jim',
      hide: true
    }];
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <select ng-model="selectedPerson" 
          ng-options="person as person.name for person in persons | filter:{hide: false}">
  </select>
</div>

answered Dec 7, 2018 at 0:33

Lex

7,2632 gold badges31 silver badges49 bronze badges

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

3 Comments

Jack Johnson Over a year ago

Thanks! I was looking for something like this. What about this other case where I have a property but I need to pass it into a function and i want to hide based on what returns from that function? Like this: { name: 'john', job: 'janitor' } function checkJob(job) { if (job === 'teacher') { return true; } return false; }

Lex Over a year ago

Don't do that in your view. When you call functions from your view in an ng-repeat or ng-options like that they get called multiple times due to the way the AngularJS digest cycle works. It will destroy performance. Instead build your collections in the controller and then use that in your view. That way you are only filtering your collection once and you get to decide when that happens.

Jack Johnson Over a year ago

ah ok thanks, maybe i'll call the function inside the controller and just have it pass a true or false before getting to the view then

Adrian Pop · Accepted Answer · 2018-12-07 00:36:04Z

The easiest way is to use the filter clause like this: ng-options="person.name for person in people | filter:{hide:'false'}". In the future, you can also create a custom filter for your array and apply it in the ng-options clause. Below you have a working example.

Cheers!

var app = angular.module("myApp", []);

angular.module("myApp").controller("myController", function($scope) {
    $scope.people = [{
       "name": "john 1",
       "hide": false
    }, {
       "name": "john hidden",
       "hide": true
    }, {
       "name": "john 2",
       "hide": false
    }]
});

angular.module("myApp").filter('hidden', [function() {
    return function (object) {
        var array = [];
        angular.forEach(object, function (person) {
            if (!person.hide)
                array.push(person);
        });
        return array;
    };
}]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
<select ng-model="person2" ng-options="person.name for person in people | filter:{hide: false}"></select>
<select ng-model="person2" ng-options="person.name for person in people | hidden"></select>
</div>

Collectives™ on Stack Overflow

How to filter ng-options on AngularJS select?

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related