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

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都匹配时，仍未选择该项目。文档似乎没有帮助。有任何想法吗？

Answer 1

ng- selected应该在<option>标记中使用，而不是在<select>标记中使用。请仔细阅读其文档和示例。

因为select指令对所选选项的确定基于ngModel。因此，一旦删除ng-selected="c.CollegeName == collegeSelection.CollegeName"，您的代码就可以使用。

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

更多细节：

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

在“选择”的情况下，collegeSelection您指定为的模型<select ng-model="collegeSelection" ...>就是 所选 项目。这意味着如果用户从页面上的下拉菜单中选择一个项目，collegeSelection则将被设置为该项目； 和
，如果您collegeSelection在javascript代码中设置了一项，则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中选择了一个项目。

这就是双向数据绑定的工作方式。