选择绑定到名称而不是值的AngularJS ng-model [英] AngularJS ng-model in select binding to name instead of value

问题描述

AngularJS将ng-model(或data-ng-model)中指定的作用域变量绑定到实际的<select>元素.因此，只要选择的变化值时，范围变量得到更新.加载后，Angular将尝试选择一个 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.

但是，我们目前看到的是Angular似乎正在使用 name 选项(即显示在HTML中的名称)来找到一个选项，以便在加载页面时进行选择.之所以出现此问题，是因为我们希望在页面加载时选择的默认选项的文本为"Select an option"，其中包含空格.

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.

以下是相关的HTML:

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>

这是在页面加载时运行的AngularJS代码的提要:

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

根据我的阅读，我认为将"default"的值分配给选择的ng-model变量将导致Angular在选项数组中找到该值，然后在用户界面，并且不添加虚拟的空项目.但这是我们目前看到的:

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:

看来，angular试图将ng-model变量与$scope.frequency中的 name 值进行匹配，我们通过测试证实了这一点.

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?

推荐答案

从不使用ngRepeat来构建选择选项，对此有专门的指令，

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还有其他好处:可以绑定到对象，每个项目都没有子作用域.

ngModel has other benefits too: ability to bind to objects, no child scope per item.

这篇关于选择绑定到名称而不是值的AngularJS ng-model的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！