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

Question

我试图通过角度的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> 

Answer 2

空行是您默认选择的值，因为您的模型为空。 要获得默认选定值，您需要为模型增加一个值：

$scope.years = getYearRange(); 
$scope.F1s_Selection = $scope.years[0];

而@ Alexis的答案也使用ng-options代替ng-repeat 。 它具有更好的性能。

Answer 3

请尝试ng-init。

<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-init = "F1s_Selection = years[0]" ng-model="F1s_Selection" class="btn btn-default">
       <option ng-repeat="year in years">{{year}}</option>
      </select>
</div>
  </div>

Answer 4

角度方式是使用ng-options：

<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" ng-options"year in years">{{year}}</option>
      </select>
</div>
  </div>

并在控制器设置F1s_Selection与所需的默认值，如下所示：

$scope.F1s_Selection = years[0];