Question

<select ng-model="team.captain" ng-options="player.name for player in team.players"></select>

这会正确创建选择列表以选择团队队长。但是，默认情况下会选择空白选项。我们如何预先从列表中预选第一个玩家？

<select ng-model="team.captain" ng-options="player.name for player in team.players" class="ng-pristine ng-valid">
  <option value="0">John</option>
  <option value="1">Bobby</option>
</select>

我尝试添加ng-init="team.captain='0'"，但这没有帮助。

更新显然会发生这种情况，因为

ng-model引用的值在传递给ng-options的一组选项中不存在。

来源：Why does AngularJS include an empty option in select?

然而，问题仍然存在，为什么使用ng-init不起作用？

<select ng-init="team.captain='0'" ng-model="team.captain" ng-options="player.name for player in team.players"></select>

Answer 1

这是有效的：

<select ng-init="team.captain=team.players[0]" 
        ng-model="team.captain" 
        ng-options="player.name for player in team.players"></select>

什么行不通：

ng-init="team.captain='0'"
ng-init="team.captain='John'"

我的猜测是Angular不仅仅是对值或标签的简单比较。它可能会比较对象引用。

Answer 2

这是使用AngularJS初始化下拉菜单的另一种方法。

（JS Fiddle的工作示例：http://jsfiddle.net/galeroy/100ho18L/1/）

<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>

<body ng-app="" ng-controller="myController">

    <select 
        ng-model="carSelection"
        ng-options = "x.make for x in cars">
    </select>

    <script>

        function myController($scope) {

            $scope.cars = [
                {"make": "Nissan", "model": "Sentra"},
                {"make": "Honda", "model": "Prelude"},
                {"make": "Toyota", "model": "Prius"}
            ]

            $scope.carSelection = $scope.cars[1]; // this line initializes the drop down menu
        }

    </script>

</body>

Answer 3

正如@camus在评论中已提到的，您需要将模型设置为有效的“标签”值（或引用），而不是索引值。这有点奇怪，因为您可以看到HTML中使用的索引值。

Angular在HTML中设置值属性，如下所示：

当使用数组作为数据源时，它将是每次迭代中数组元素的索引;
当使用object作为数据源时，它将是每次迭代中的属性名称。

当选择一个项目时，Angular会根据索引或属性名称在数组/对象中查找正确的条目。

Answer 4

如ng-selected所示this jsfiddle：

<select ng-model="val">
  <option ng-repeat="opt in options" ng-selected="$first">
    {{ opt }}
  </option>
</select>

Answer 5

我使用 ng-model 和 ng-options 实现了这一点。基本上，您的模型和ng-options应该同步。

当我的模型（在这种情况下为projIndustry）初始化为某个数字时，我必须在ng-options中使用 ind.ID 。（ID比较）。
当我的模型初始化为object时，我必须在ng-options中使用 ind （object）。（对象比较）

<select data-ng-options="ind.ID as ind.Display_Text for ind in arrIndustries" 
 data-ng-model="projIndustry" ng-change="onIndChange()" />

Answer 6

如果您使用的是角度2+，则可以使用以下方法。 `

<mat-select matNativeControl placeholder="Select Item" [(ngModel)]="selectedItem" name="selectedCaseStudyName" (selectionChange)="onSelectionChangeHandler($event)" [ngStyle]="{'background-color':'silver'}">

        <mat-option *ngFor="let item of myItemList" [value]="item.ItemName">
            {{item.ItemName}}
        </mat-option>
    </mat-select>`

在.ts中，

'selectedItem = myItemList[2].ItemName'

myItemList是对象列表，其中一个字段为ItemName。重要的一点是将[（ngModel）]绑定到变量selectedItem，然后使用列表的所需索引对其进行初始化。每当绑定[(ngModule)]时，请确保导入NgModule

import {ngModule} from '@angular/core';

如何对AngularJS生成的选择列表进行预选？

6 个答案: