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

问题

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?

回答1:

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.

回答2:

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>

来源：https://stackoverflow.com/questions/37476289/angularjs-ng-model-in-select-binding-to-name-instead-of-value

标签

javascript

angularjs

html-select