AngularJS ng-model in select binding to name instead of value

Question

AngularJS binds a scoped variable specified in ng-model (or data-ng-model) to an actual <select> element. Hence, whenever the select changes value, the scoped variable gets updated. Upon loading, Angular will attempt to select an option whose value (not name), matches the model variable in the controller.

However, what we are currently seeing is that Angular appears to be using the option name (i.e. the name which gets displayed in the HTML) to find an option to select when the page gets loaded. The problem comes in because the text for the default option we want selected at page load is "Select an option", which contains spaces.

Here is the relevant HTML:

<select class="settings-select-box" name="LOCATION_UPDATE_FREQUENCY"
        id="LOCATION_UPDATE_FREQUENCY"
        data-ng-model="configurations.LOCATION_UPDATE_FREQUENCY"
        data-ng-change="updateSelectList()">

    <option data-ng-repeat="option in frequency"
            data-ng-value="{{option.value}}">{{option.name}}</option>
</select>

And here is a synopsis of the AngularJS code which runs upon page loads:

$scope.frequency = [{value: "default", name: "Select an option"},
                    {value: "Never",   name: "Never"},
                    {value: "Daily",   name: "Daily"},
                    {value: "Weekly",  name: "Weekly"},
                    {value: "Monthly", name: "Monthly"}];

$scope.configurations.LOCATION_UPDATE_FREQUENCY = "default";

Based on what I read, I would have thought that assigning a value of "default" to the ng-model variable for the select would have resulted in Angular finding this value in the array of options, selecting "Select an option" in the UI, and also not adding a dummy empty item. But this is what we are currently seeing:

It appears that angular is trying to match the ng-model variable against the name values in $scope.frequency, and we confirmed this through testing.

Can someone shed light on what is going on here?

dfsq · Accepted Answer · 2016-05-27 06:34:50Z

7

Never use ngRepeat to build select options, there is dedicated directive for this, ngOptions:

<select class="settings-select-box" name="LOCATION_UPDATE_FREQUENCY"
        id="LOCATION_UPDATE_FREQUENCY"
        data-ng-model="configurations.LOCATION_UPDATE_FREQUENCY"
        data-ng-change="updateSelectList()"
        data-ng-options="option.value as option.name for option in frequency">
</select>

ngModel has other benefits too: ability to bind to objects, no child scope per item.

edited May 27, 2016 at 6:34

answered May 27, 2016 at 6:31

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

Comments

Partha Sarathi Ghosh · Accepted Answer · 2016-05-27 06:34:43Z

0

Change "default" to "" for {value: "default", name: "Select an option"} To remove the extra blank option.

You can use ng-option on select too as follows:

<select 
    ng-options="item.value as item.name for item in frequency track by item.value" 
    class="settings-select-box" 
    name="LOCATION_UPDATE_FREQUENCY"
    id="LOCATION_UPDATE_FREQUENCY"
    data-ng-model="configurations.LOCATION_UPDATE_FREQUENCY"
    data-ng-change="updateSelectList()"></select>

answered May 27, 2016 at 6:34

Partha Sarathi Ghosh

11.7k22 gold badges64 silver badges84 bronze badges

2 Comments

Tim Biegeleisen Over a year ago

Your first option (using {value: "", name: "Select an option"}, did not work and resulted with the Select an option option not even appearing in the drop down.

Partha Sarathi Ghosh Over a year ago

Same answer as u selected only track by was not used

Collectives™ on Stack Overflow

AngularJS ng-model in select binding to name instead of value

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related