我有一个选择

<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/

10-12 12:57
查看更多