一尘不染

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

angularjs

我有一个选择

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


阅读 213

收藏
2020-07-04

共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中选择了一个项目。

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

2020-07-04