javascript - Angular ng-repeat 在选择选项中显示额外的空间而不选择默认值。

Question

我试图通过 Angular 的 ng-repeat 在选择框中显示年份列表，但它在年份列表之前显示一个空行并且没有显示应该是第一年的选定值列表。你可以在代码示例中看到。任何帮助将不胜感激。

 angular.module('F1FeederApp', ['F1FeederApp.controllers']);
 
  angular.module('F1FeederApp.controllers', []).

  /* Drivers controller */
  controller('driversController', function($scope) {
  
    $scope.years = getYearRange(); 
   	
  });
  /* Year Range Code */
  function getYearRange() {
  var startYear = new Date().getFullYear();
  var endYear = 2005;
  var dateRange = [];

  while(endYear <= startYear) {
      dateRange.push(startYear);
      startYear -= 1
  }
  return dateRange;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<div ng-app="F1FeederApp">
  <div ng-controller="driversController">  
      <select ng-model="F1s_Selection" class="btn btn-default">
       <option ng-repeat="year in years">{{year}}</option>
      </select>
</div>
  </div>

Answer 1

使用ng-options而不是 ng-repeat 它可以工作并且更好。

angular.module('F1FeederApp', ['F1FeederApp.controllers']);
angular.module('F1FeederApp.controllers', []).

  /* Drivers controller */
  controller('driversController', function($scope) {
  
    $scope.years = getYearRange(); 
   	
  });
  /* Year Range Code */
  function getYearRange() {
  var startYear = new Date().getFullYear();
  var endYear = 2005;
  var dateRange = [];

  while(endYear <= startYear) {
      dateRange.push(startYear);
      startYear -= 1
  }
  return dateRange;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<div ng-app="F1FeederApp">
  <div ng-controller="driversController">  
      <select ng-model="F1s_Selection" ng-options="year as year for year in years | orderBy:year track by years  " class="btn btn-default">
      </select>
</div>
  </div>