选择绑定到名称而不是值的AngularJS ng-model

Question

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

但是,我们目前看到的是Angular似乎正在使用选项名称(即在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";

基于我所读到的内容,我原本认为为select "default"的ng-model变量赋值会导致Angular在选项数组中找到这个值,"Select an option"在UI中选择,也不会添加虚拟空项.但这是我们目前看到的:

看起来angular正试图将ng-model变量与名称值匹配$scope.frequency,我们通过测试证实了这一点.

有人能否了解这里发生的事情？

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也有其他好处:绑定到对象的能力,每个项目没有子范围.