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
都是所选的选项。
这就是双向数据绑定的工作原理。
collegeSelection
模型即可。 - Ye Liu