AngularJS select 中的 ng-model 绑定到名称而不是值
AngularJS ng-model in select binding to name instead of value
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 值进行匹配,我们通过测试。
有人可以阐明这里发生了什么吗?
切勿使用 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 还有其他好处:能够绑定到对象,每个项目没有子作用域。
将 "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 将 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 值进行匹配,我们通过测试。
有人可以阐明这里发生了什么吗?
切勿使用 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 还有其他好处:能够绑定到对象,每个项目没有子作用域。
将 "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>