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>代码中使用。仔细看看它的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>

就是这样！如果您运行代码，将选择学院数组中的第一所大学。

只需记住collegeSelection 所选的选项，无论是因为用户在UI上选择了某个项目，还是在javascript中选择了某个项目。

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

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()以确保数据类型匹配。

ng-selected不在select元素中工作

4 个答案:

更多详情：