AngularJS select statement with null value

Question

I have a requirement to present a select list in AngularJS that contains a single null value option. Here's the stub of Angular controller:

function BookController($scope) {
    $scope.book = {
        titleId: null
    };

    $scope.titles = [
        {id: null, text: "Book Title <null>"},
        {id: 1,    text: "Book Title #1"},
        {id: 2,    text: "Book Title #2"},
        {id: 3,    text: "Book Title #3"}
    ];
}

This works as expected with one exception, Angular appears to insert an additional blank 'option' element at head of the list:

<option value="" selected="selected" label=""></option>

This option does not appear to adversely effect the function - even if the user selects it, the select list selects the first 'real' option. Interestingly(?) this option only appears when the null option is selected, if a valued/non-null option is selected then the blank option disappears.

From a UI perspective I don't think this is ideal - does anyone know what causes this and whether it is avoidable?

A JSFiddle is available here https://jsfiddle.net/xab21mrr/4/

Thank you.

This is a bug that has been fixed: plnkr.co/edit/XOfMt77DX0gnSOfGWwE5?p=preview. Version 1.2.1 is really, really old. — JB Nizet
– JB Nizet, Commented Jun 29, 2015 at 9:26
I was running 1.3.16 - upgrading to 1.4.1 fixed the problem - thank you for your help. — Neilski
– Neilski, Commented Jun 29, 2015 at 9:56

Jscti · Accepted Answer · 2015-06-29 09:35:34Z

1

Yes angular added an empty option and you cannot do anything about it.. but based on your need, I suggest you to refactor a little like that :

controller (remove empty first object) :

$scope.titles = [
    {id: 1,    text: "Book Title #1"},
    {id: 2,    text: "Book Title #2"},
    {id: 3,    text: "Book Title #3"}
];

template:

<select ng-model="book.titleId" ng-options="title.id as title.text for title in titles">
    <option value="">Book Title null</option>
</select>

This way, you'll have your "null" option instead of the empty one

edit: bug fixed since (thanks JB Nizet comment for that). Still, you may need this refactor because it is the standard way to display an empty/reset choice not related to any server data)

edited Jun 29, 2015 at 9:35

answered Jun 29, 2015 at 9:30

Jscti

14.5k5 gold badges66 silver badges92 bronze badges

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

1 Comment

Neilski Over a year ago

Unfortunately, in this case, I could not easily hard-code the option as it was dynamic/optional based upon the book selection, i.e. some title list have a null title entry whilst others don't. I could, I suppose, have templated it in/out with ng-if or similar, but upgrading to AngularJS 1.4.1 has resolved the issue.

Dmitri Algazin · Accepted Answer · 2015-06-29 10:17:36Z

0

<select ng-model="book.titleId" ng-options="title.id as title.text for title in titles">
  <option value="" disabled selected style="display: none;">Select book</option>
</select>

answered Jun 29, 2015 at 10:17

Dmitri Algazin

3,4541 gold badge33 silver badges32 bronze badges

Collectives™ on Stack Overflow

AngularJS select statement with null value

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