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

Question

我有一个选择

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

Answer 1

ng-selected应该在<option>标记中使用，而不是在<select>标记中使用。 请仔细阅读其文档和示例。

因为select指令对selected选项的确定基于ngModel 。 因此，一旦删除ng-selected="c.CollegeName == collegeSelection.CollegeName" ，您的代码就可以使用。

我创建了一个非常简单的插件来演示select指令中的“ selected”功能。

更多细节：

AngularJS使用ngModel指令在模型和UI元素之间启用“双向数据绑定”。

在的情况下，“选择”，该模型collegeSelection指定为<select ng-model="collegeSelection" ...>是所选择的项目。 这意味着，如果用户从页面的下拉菜单中选择一个项目， collegeSelection设置为该项目； 和 ，如果您将collegeSelection选择中的collegeSelection设置为一个项目，AngularJS将确保<option>相应的<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数组中的第一所大学。

请记住，无论是因为用户在UI上选择了一个项目，还是您在javascript中选择了一个项目，都记住collegeSelection 是选定的选项。

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

Answer 2

在与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'"更改为另一个值将选择其他选项。

Answer 3

有些人对此有疑问。 我找到了一个很好的解决方案，可以将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>

`

Answer 4

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