Angular is displaying null values in select element

I have an array of values with possible null. AngularJS displays those by default as a value, but I want to skip those values entirely.

Is my only option to create a filter or is there any other solution out there?

My code:

var app = angular.module('fooapp', []);

app.controller('FooController', function($scope) {
    $scope.foo = [null, 'foo', 'bar'];
});

<body ng-app="fooapp">
    <div ng-controller="FooController">
        <select ng-model="foomodel" ng-options="f for f in foo"></select>
    </div>
</body>

Here's a plunker:

http://plnkr.co/edit/ZGbkbtQ2xNQuoaowUK5z?p=preview

Upvotes: 1

Views: 91

Answers (2)

Christian A
Christian A

Reputation: 377

You can do it by using a filter:

<select ng-model="foomodel" ng-options="f for f in foo | filter: '!null'"></select>

Upvotes: 3

Dragan
Dragan

Reputation: 13

Try this:

<select ng-model="foomodel" ng-options="f for f in foo | filter:'!'+null"></select>

Upvotes: 0

Related Questions