我有一个选择
<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都匹配时,仍未选择该项目。文档似乎没有帮助。有任何想法吗?
ng- selected应该在<option>标记中使用,而不是在<select>标记中使用。请仔细阅读其文档和示例。
ng- selected
<option>
<select>
因为select指令对所选选项的确定基于ngModel。因此,一旦删除ng-selected="c.CollegeName == collegeSelection.CollegeName",您的代码就可以使用。
select
ngModel
ng-selected="c.CollegeName == collegeSelection.CollegeName"
我创建了一个非常简单的插件来演示select指令中的“选定”功能。
AngularJS使用ngModel指令在模型和UI元素之间启用“双向数据绑定”。
在“选择”的情况下,collegeSelection您指定为的模型<select ng-model="collegeSelection" ...>就是 所选 项目。这意味着如果用户从页面上的下拉菜单中选择一个项目,collegeSelection则将被设置为该项目; 和 ,如果您collegeSelection在javascript代码中设置了一项,则AngularJS将确保<option>已选择对应项。
collegeSelection
<select ng-model="collegeSelection" ...>
假设您的控制器中包含以下代码:
$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中选择了一个项目。
这就是双向数据绑定的工作方式。