Question

我想为select元素设置一个默认值：

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.js"></script>
  </head>
  <body ng-app="app">
    <div ng-controller="controller">
      <p>Year: {{ selectedYear }}</p>
      <p>Month: {{ selectedMonth }}</p>

      <select ng-model="selectedYear" ng-options="value for (key, value) in years track by value"></select>      
      <select ng-model="selectedMonth" ng-options="key as value for (key, value) in months track by key"></select>          
    </div>
  </body>
</html>

JavaScript的：

angular.module("app", [])
.controller("controller", function($scope){
  $scope.months = ["Jan", "Fev", "Mar", "Abr"];
  $scope.selectedMonth = 0;

  $scope.years = [2015, 2016, 2017];
  $scope.selectedYear = 2015;
})

我已经尝试了一个月：

$scope.selectedMonth = 0;
$scope.selectedMonth = "Jan";
$scope.selectedMonth = $scope.months[0];

似乎无效。我也用codepen写了它：http://codepen.io/anon/pen/NGPPde?editors=101

为什么默认情况下我的月份从未被选中？

Answer 1

首先，您不能同时使用select as和track by。见https://docs.angularjs.org/api/ng/directive/ngOptions

要解决您的问题，您需要了解，因为您使用的是key as value for (key, value)，这会导致Angular将months视为对象。这导致键是字符串，而不是整数。因此，请进行以下两项更改：

将其设为字符串

$scope.selectedMonth = "0";

删除track by

<select ng-model="selectedMonth" ng-options="key as value for (key, value) in months"></select>

老实说，对于这样一个简单的数据模型，使用<option ng-repeat>而不是ng-options会更容易。

Answer 2

ngOptions的文档说：

请勿在同一表达式中使用select as和track by。它们不是为了协同工作而设计的。

它还表示符号for (key, value)用于对象数据源，而不用于数组数据源。

所以我的猜测是，这一年的预选类型是偶然的，但你不应该依赖它。相反，坚持记录的用法。只需将月份名称数组转换为对象数组：

$scope.monthObjects = $scope.months.map(function(monthName, index) {
    return {
        index: index,
        name: monthName
    };
});

并使用

ng-options="month.index as month.name for month in monthObjects"

和

$scope.selectedMonth = 0;

Answer 3

只需将ng-options指令更新为

即可

month for month in months

当然，如果您想将selectedMonth变量保持为显示内容的字符串值，而不是像0这样的数字值。

希望能帮到你！

在angularjs中设置select的默认值

3 个答案: