Select empty element in <select> with AngularJS

Question

I use AngularJS and bind a <select> to my model:

<select ng-model="model.something" ng-options="..." >
    <option></option>
</select>

It leaves one empty element on top of dropdown, and then generates other options from my view-model.

These things work great:
1. I choose option from dropdown, it is bound to model.something.
2. I choose empty option, model.something is set to null.
3. I set model.something in another function, the correct option is selected.

What does not work:
- I set model.someting to null in another function, empty option is not selected, the previous value is still selected. How to "tell" Angular to select empty option, if I bind model to null value?

Diana Nassar · Accepted Answer · 2014-06-07 10:42:47Z

4

Change <option></option> to <option value=""></option> and set model.someting to empty string "".

UPDATE

Here is a working JSFiddle: http://jsfiddle.net/DianaNassar/6kLW6/

edited Jun 7, 2014 at 10:42

answered Jun 7, 2014 at 10:24

Diana Nassar

2,30316 silver badges17 bronze badges

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

2 Comments

Tschareck Over a year ago

Can value be set to null, not ''? When user selects empty, it effectively means, that they want to "delete" their previous decision. I need the value to be null then.

Diana Nassar Over a year ago

I use it this way in my applications and it works; empty string, effectively, makes the value "undefined" i.e. not selected. I'll check setting it to "null" or "undefined" in JSFiddle and get back to you.

Collectives™ on Stack Overflow

Select empty element in <select> with AngularJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related