选择绑定到名称而不是值

Question

AngularJS将ng-model（或data-ng-model）中指定的范围变量绑定到实际的<select>元素。因此，每当select更改值时，范围变量都会更新。加载后，Angular将尝试选择值（非名称）的选项，与控制器中的模型变量匹配。

但是，我们目前看到的是Angular似乎正在使用选项 name （即在HTML中显示的名称）来查找选择何时加载页面的选项。问题出现了，因为我们想要在页面加载时选择的默认选项的文本是"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>

以下是在页面加载时运行的AngularJS代码的概要：

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

根据我读到的内容，我原本认为将"default"的值分配给select的ng-model变量会导致Angular在选项数组中找到此值，选择{用户界面中的{1}}，以及不添加虚拟空项目。但这正是我们目前所看到的：

似乎有角度试图将"Select an option"变量与ng-model中的名称值进行匹配，我们通过测试证实了这一点。

有人可以了解这里发生的事情吗？

Answer 1

永远不要使用ngRepeat构建选择选项，有专门的指令，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>