如何使用AngularJS在选择字段中将预选选项设置为默认值答案

【问题标题】：How to set a preselected option as default in a select field using AngularJS如何使用AngularJS在选择字段中将预选选项设置为默认值
【发布时间】：2017-03-24 05:41:39
【问题描述】：

我在使用 AngularJS 在 HTML 中设置选择框的默认值时遇到了麻烦。

这是我在控制器中的作用域变量：

$scope.sensorReadingsPerPage = 30;

这是视图中使用控制器的选择框：

<select id="itemsPerPage" name="itemsPerPage" class="panel panel-default" ng-model="sensorReadingsPerPage" ng-change="changeItemsPerPage()">
  <option value="10">10</option>
  <option value="20">20</option>
  <option value="30">30</option>
  <option value="40">40</option>
  <option value="50">50</option>
  <option value="100">100</option>
</select>

我希望预先选择具有“30”值的选项。

我尝试使用this 答案和this one，它们都引用AngularJS documentation on select directive，但在这些情况下，选项是动态生成的，并且范围包含在其中包含多个值的对象中。在我的情况下，选项是静态的，范围内只有一个变量。

我该如何解决这个问题？有没有办法更改ng-init 和ng-options 以适合我的情况？

【问题讨论】：

标签： javascript html angularjs

【解决方案1】：

尝试在您的控制器中设置$scope.sensorReadingsPerPage = "30"。

注意：它应该是一个字符串。

【讨论】：

这个答案更有用，因为它显示了一个非常简单的解决方案，并且我试图将 ng-model 设置为整数值是错误的。我不知道它必须是一个字符串。

【解决方案2】：

您是否尝试过使用 ng-options 而不是创建单独的选项元素？

<select id="itemsPerPage" name="itemsPerPage" class="panel panel-default" ng-options="item in items track by $index" ng-model="sensorReadingsPerPage" ng-change="changeItemsPerPage()">

在你的控制器中

$scope.items = [10, 20, 30, 40, 50, 100];
$scope.sensorReadingsPerPage = $scope.items[2];

【讨论】：

我尝试了这个答案，效果也很好，但它需要对我的代码进行更积极的更改。