我有一个选择
<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>
标记中使用。仔细看看其doc和示例。
因为select
指令对所选选项的确定是基于ngModel
的。因此,一旦删除ng-selected="c.CollegeName == collegeSelection.CollegeName"
,您的代码就应该可以使用。
我创建了一个非常简单的plunk来演示select
指令中的“选定”功能。
更多细节:
AngularJS使用ngModel
指令在模型和UI元素之间启用“双向数据绑定(bind)”。
在“选择”的情况下,您指定为collegeSelection
的模型<select ng-model="collegeSelection" ...>
是所选项目。这意味着,如果用户从页面的下拉菜单中选择一个项目,collegeSelection
将被设置为该项目; 和,如果在您的javascript代码中将collegeSelection
设置为一个项目,AngularJS将确保选择了对应的<option>
。
假设您的 Controller 中包含以下代码:
$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中选择了一项。这就是双向数据绑定(bind)的工作方式。
关于javascript - ng-selected在选择元素中不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/17645620/