Angular is displaying null values in select element

Question

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

Christian A · Accepted Answer · 2015-01-28 12:33:13Z

3

You can do it by using a filter:

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

answered Jan 28, 2015 at 12:33

Christian A

3872 silver badges11 bronze badges

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

1 Comment

Gaui Over a year ago

In my opinion this is a ugly hack. I opened a issue for this in AngularJS project on GitHub.

Dragan · Accepted Answer · 2015-01-28 12:22:49Z

0

Try this:

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

answered Jan 28, 2015 at 12:22

Dragan

133 bronze badges

Collectives™ on Stack Overflow

Angular is displaying null values in select element

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related