AngularJS dropdown default value is blank

Question

I am displaying data from a database in a table. One of the table columns stores true/false. I am displaying this column as a drop down, but the value is not defaulting to the database value. The default is blank.

JS

$scope.options = [{ label: 'false', val: false }, { label: 'true', val: true }];

$scope.usersList = users

HTML

<tr ng-repeat = "user in usersList">
 <td>
                    <select ng-model="user.admin"
                            ng-options="opt as opt.label for opt in options">
                        <option value="{{user.admin}}">{{user.admin}}</option>
                    </select>
</td>
</tr>

Page Source

<td>
                    <select ng-model="user.admin" ng-options="opt as opt.label for opt in options" class="ng-pristine ng-valid ng-touched"><option value="?" selected="selected"></option><option label="false" value="object:15">false</option><option label="true" value="object:16">true</option></select>
                </td>

Is `user.admin` populated? Since that is the model, that is what will be set as default, if it's empty, the default value will be empty. — ragerory, Nov 19 '15 at 19:00
Possible duplicate of [Why does angularjs include an empty option in select](http://stackoverflow.com/questions/12654631/why-does-angularjs-include-an-empty-option-in-select) — Matt MacLeod, Nov 19 '15 at 19:02
Yes, if I only print user.admin, I see the right value. But if I use a drop down it will not set to that value. — Kumar, Nov 19 '15 at 19:15

score 0 · Answer 1 · answered Nov 19 '15 at 19:02

0

By default the select ng-option is blank. you can initialise it:

$scope.user.admin = options[0];

answered Nov 19 '15 at 19:02

MayK

1,269
1
10
24

score 0 · Answer 2 · edited May 23 '17 at 12:15

0

Essentially, ensure user.admin has a value that maps to a value in your ng-options to set a default value and handle the blank option.

Why does AngularJS include an empty option in select?

edited May 23 '17 at 12:15

Community

1
1

answered Nov 19 '15 at 19:03

Matt MacLeod

438
2
5
17

score 0 · Answer 3 · answered Nov 19 '15 at 19:18

0

You just need to initialize $scope.user.admin like this:

$scope.user.admin = true;

or like this

$scope.user.admin = false;

Have a look at this fiddle - http://jsfiddle.net/r9sb53zv/

answered Nov 19 '15 at 19:18

codebusta

1,922
1
14
15

But that doesn't solve my problem. I want to set it to what is stored in the db and not default it to any value. I am displaying rows from a table and one of the column stores either true or false. In the drop down, it should default to the database value and allow the use to change it by selecting the other option in the drop down. – Kumar Nov 19 '15 at 19:26
Do a little reading man! I just gave you idea. Get the value from the database and set it to $scope.user.admin. – codebusta Nov 19 '15 at 20:07
There is a reason I am here. If you can't give me the answer, just say so. – Kumar Nov 19 '15 at 20:25
The answer is right above. You get from your database either true or false right? So just get that value and set it to $scope.user.admin = yourDatabaseTable.yourDatabaseColumnValue. It is not difficult. Or just put your whole code, I'll give you exact answer! In your example there is no database. – codebusta Nov 19 '15 at 20:32
I've updated my original posting with the relevant code. userList is a json response from a rest call. – Kumar Nov 19 '15 at 20:49

AngularJS dropdown default value is blank

3 Answers3