javascript - AngularJS ng-model 在选择绑定(bind)到名称而不是值

Question

AngularJS 绑定(bind)在 ng-model 中指定的作用域变量(或 data-ng-model )到实际的 <select>元素。因此，每当选择更改值时，作用域变量就会更新。加载后，Angular 将尝试选择一个选项，其值(不是名称)与 Controller 中的模型变量相匹配。

但是，我们目前看到的是 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"到 ng-model选择的变量会导致 Angular 在选项数组中找到这个值，选择 "Select an option"。在用户界面中，并且不添加一个虚拟的空项目。但这是我们目前看到的:

看起来 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 还有其他好处:能够绑定(bind)到对象，每个项目没有子作用域。