ng-selected在select元素中无法工作

Question

我有一个绑定的下拉选择框。

<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时，该项仍未被选中。文档似乎没有帮助。有什么想法吗？

- rross

Answer 1

ng-selected 应该用在 <option> 标签上，而不是 <select> 标签上。请仔细查看其 文档 和示例。

因为 select 指令中选定的选项是基于 ngModel 的确定的。因此，一旦你移除了 ng-selected="c.CollegeName == collegeSelection.CollegeName", 你的代码就应该可以正常工作。

我创建了一个非常简单的 plunk 来演示 select 指令中的 "selected" 特性。

更多细节：

AngularJS 使用 ngModel 指令来实现模型和 UI 元素之间的 "双向数据绑定"。

在 "select" 的情况下，你指定的 collegeSelection 作为 <select ng-model="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>

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

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

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

- Ye Liu

---

我明白了，但是我想做的是将选择元素中的某个项目作为选定元素。怎么做呢？ - rross

你只需要设置 collegeSelection 模型即可。 - Ye Liu

Answer 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'"更改为其他值将选择不同的选项。

- Brett DeWoody

---

你不一定需要使用 ngInit。尝试在 $scope.colors = [...]; 后添加 $scope.selectedColor = 'yellow';。 - Ye Liu

Answer 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>

`

- Mikhail Malakhvei

Answer 4

我曾遇到相似的问题并发现原因是由于不同的数据类型造成的。 ng-model 与一个字符串值进行比较，但我从数据库中提取了一个整数，所以它没有自动选择选项。为了解决这个问题，我在从数据库查询数据后调用了 toString() 方法，以确保数据类型匹配。

- Dennis Wanyonyi