AngularJS select 中的 ng-model 绑定到名称而不是值

Question

AngularJS 将 ng-model（或 data-ng-model）中指定的作用域变量绑定到实际的 <select> 元素。因此，只要 select 更改值，作用域变量就会更新。加载后，Angular 将尝试 select 一个选项，其 value（不是名称）与控制器中的模型变量相匹配。

但是，我们目前看到的是 Angular 似乎正在使用选项 name（即 HTML 中显示的名称) 在页面加载时找到 select 的选项。出现问题是因为我们希望在页面加载时 selected 的默认选项的文本是 "Select an option"，其中包含空格。

这里是相关的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>

这里是Angular在页面加载时运行的 JS 代码的概要：

$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";

根据我读到的内容，我认为为 select 的 ng-model 变量赋值 "default" 会导致 Angular 发现这个值在选项数组中，selecting "Select an option" 在 UI 中，并且 not 添加一个虚拟的空项目。但这是我们目前看到的：

似乎 angular 正在尝试将 ng-model 变量与 $scope.frequency 中的 name 值进行匹配，我们通过测试。

有人可以阐明这里发生了什么吗？

Answer 1

切勿使用 ngRepeat 构建 select 选项，对此有专门的指令，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 还有其他好处：能够绑定到对象，每个项目没有子作用域。

Answer 2

将 "default" 更改为 "" {value: "default", name: "Select an option"} 删除多余的空白选项。

您也可以在 select 上使用 ng-option，如下所示：

<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>

AngularJS select 中的 ng-model 绑定到名称而不是值

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

javascript

angularjs

html-select