ng-selected 在选择元素中不起作用

Posted 2023-02-22

【中文标题】ng-selected 在选择元素中不起作用

【英文标题】：ng-selected not working in select element

【发布时间】：2013-07-12 19:24:30

【问题描述】：

我有一个绑定选择

<select ng-model="collegeSelection" ng-options="c as c.CollegeName for c in colleges" ng-selected="c.CollegeName == collegeSelection.CollegeName" name="selectCollege" id="selectCollege"></select>  

但是当 c.CollegeName == collegeSelection.CollegeName 都匹配时，该项目仍然未被选中。文档似乎没有帮助。有任何想法吗？

【参考方案1】：

ng-selected 应该用在<option> 标记中，而不是<select> 标记中。仔细看看它的doc 和示例。

因为select 指令对选定选项的确定是基于ngModel。因此，一旦您删除 ng-selected="c.CollegeName == collegeSelection.CollegeName"，您的代码应该可以工作。

我创建了一个非常简单的plunk 来演示select 指令中的“选定”功能。

更多细节：

AngularJS 使用 ngModel 指令在模型和 UI 元素之间启用“双向数据绑定”。

在“选择”的情况下，您指定为<select ng-model="collegeSelection" ...> 的模型collegeSelection 是已选择 项。这意味着如果用户从页面上的下拉列表中选择一个项目，collegeSelection 将被设置为该项目； 并且，如果您在 javascript 代码中将 collegeSelection 设置为某个项目，AngularJS 将确保选择对应的 <option>。

假设您的控制器中有以下代码：

$scope.colleges = [
    id: 0, name: 'a',
    id: 1, name: 'b',
    id: 2, name: 'c'
];

$scope.collegeSelection = $scope.colleges[0];

html 看起来像：

<select ng-model="collegeSelection" ng-options="c as c.name for c in colleges"></select>

就是这样！如果您运行代码，将选择colleges 数组中的第一个学院。

请记住collegeSelection 是选择的选项，无论是因为用户在 UI 上选择了一个项目，还是因为您在 javascript 中选择了一个项目。

这就是双向数据绑定的工作原理。

【讨论】：

我明白了，但我想做的是使选择元素中的某个项目成为选定元素。如何做到这一点？

你只需要设置collegeSelection模型。

【参考方案2】：

在与ng-selected 玩了一段时间后，我无法像您要求的那样让它工作。但是，我可以使用 ng-init 预先选择特定选项。

这是我的解决方案的JSFiddle。我的<select> 最终成为：

 <select ng-model="selectedColor" ng-options="color.value as color.name for color in colors" ng-init="selectedColor='yellow'">
   <option value="">Select A Color</option>
 </select>`

而我的colors 数组是：

 colors = [
        name:'Red', value: 'red', 
        name:'Orange', value: 'orange', 
        name:'Yellow', value: 'yellow', 
        name:'Green', value: 'green', 
        name:'Blue', value: 'blue', 
        name:'Indigo', value: 'indigo', 
        name:'Violet', value: 'violet'
 ]

将ng-init="selectedColor='yellow'" 更改为另一个值将选择不同的选项。

【讨论】：

您不一定需要ngInit。尝试在您的$scope.colors = [...]; 之后添加$scope.selectedColor = 'yellow';

【参考方案3】：

有些人对此有疑问。如果controller as someController

，我找到了一个简单的下拉列表的好方法

var vm = this;
this.colors = [
        name:'Red', 
        name:'Orange', 
        name:'Yellow', 
        name:'Green', 
        name:'Blue', 
        name:'Indigo', 
        name:'Violet'
 ];
this.color_selected = "Yellow";
<select ng-model="someController.color_selected" ng-options="opt.name as opt.name for opt in someController.colors">
</select>

`

【参考方案4】：

我有一个类似的问题，并意识到原因是由于不同的数据类型。 ng-model 正在与字符串值进行比较，但我从数据库中提取了一个整数，因此它不会自动选择该选项。为了克服这个问题，我在从数据库中查询数据后，在整数上调用了toString()，以确保数据类型匹配。