ng-selected不在select元素中工作

Posted 2021-05-04

我有一个绑定选择

<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元素之间启用“双向数据绑定”。

在“选择”的情况下，您指定为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中选择了一个项目。

这就是双向数据绑定的工作原理。

另一答案

在与ng-selected玩了一段时间后，我无法像你要求的那样让它工作。但是，我能够使用ng-init预先选择一个特定的选项。

这是我的解决方案的JSFiddle。我的<select>最终成为：

 <select ng-model="selectedColor" ng-options="color.value as color.name for color in colors" ng-init="selectedColor='yellow'">
   <option value="">Select A Color</option>
 </select>`

我的colors数组是：

 colors = [
        {name:'Red', value: 'red'}, 
        {name:'Orange', value: 'orange'}, 
        {name:'Yellow', value: 'yellow'}, 
        {name:'Green', value: 'green'}, 
        {name:'Blue', value: 'blue'}, 
        {name:'Indigo', value: 'indigo'}, 
        {name:'Violet', value: 'violet'}
 ]

将ng-init="selectedColor='yellow'"更改为其他值将选择其他选项。

另一答案

有些人对此有疑问。如果controller as someController，我找到了一个简单的下拉菜单的解决方案

var vm = this;
this.colors = [
        {name:'Red'}, 
        {name:'Orange'}, 
        {name:'Yellow'}, 
        {name:'Green'}, 
        {name:'Blue'}, 
        {name:'Indigo'}, 
        {name:'Violet'}
 ];
this.color_selected = "Yellow";
<select ng-model="someController.color_selected" ng-options="opt.name as opt.name for opt in someController.colors">
</select>

`

另一答案

我有一个类似的问题，并意识到原因是因为不同的数据类型。 ng-model正在与字符串值进行比较，但我从数据库中提取了一个整数，因此它没有自动选择该选项。为了解决这个问题，我在查询数据库中的数据后调用toString()来确保数据类型匹配。