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

IT技术 javascript angularjs
2021-03-20 10:41:06 
<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 的一组选项中不存在。

来源：为什么 AngularJS 在选择中包含一个空选项？

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

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

这是有效的：

<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 不仅仅是值或标签的简单比较。它可能比较对象引用。

如果这里有人试图用角材料 md-select 实现同样的目标，请查看此答案stackoverflow.com/a/38639823/3836923
2021-04-27 10:41:06
我应该在我的回答中提到“标签”值需要引用数组中的同一个对象。换句话说，这也不起作用：ng-init="{name: 'John'}"
2021-05-16 10:41:06

这是使用 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>

嘿，您似乎对初始化组合框很熟悉，只是问它是否不打扰您，如果您有一个选择框，就问这个 ope.carSelection = $scope.cars[1]; 如果我想在动态数量的组合框中初始化并且我想将它们全部初始化为相同的值怎么办这是我的问题 stackoverflow.com/questions/37351051 /... 谢谢
2021-05-01 10:41:06
关键是它必须是对同一对象的引用，我尝试使用具有相应 id 的不同对象。+1
2021-05-18 10:41:06

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

Angular 在 HTML 中设置 value 属性如下：

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

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

ng-selected怎么样，如在这个 jsfiddle 中看到的 ：

<select ng-model="val">
  <option ng-repeat="opt in options" ng-selected="$first">
    {{ opt }}
  </option>
</select>
它有效，但是当用于option标签而不是select
2021-05-11 10:41:06

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

当我的模型（在本例中为 projIndustry）被初始化为某个数字时，我不得不在 ng-options.（ID 比较）中使用ind.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()" />
不错的方法！！
2021-05-17 10:41:06
其它你可能感兴趣的问题
上一篇如何从数组中返回随机值？ 下一篇我可以在 javascript 中扩展控制台对象（用于重新路由日志记录）吗？