CODEWITHSUNDEEP
javascriptangularjs
JunaidFarooqui
JunaidFarooqui

Reputation: 460

Angular ng-repeat in select options showing extra space and not selecting default value.

I am trying to show a list of years in a select box through angular's ng-repeat but it is showing an empty line before list of years and not showing selected value which should be first year in the list. you can see in code example. any help will be highly appreciated.

 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>

Upvotes: 1

Views: 605

Answers (4)

Alexis
Alexis

Reputation: 5831

Use ng-options instead of ng-repeat it works and it's better.

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>

Upvotes: 2

rave
rave

Reputation: 1032

The angular way is to use ng-options for this:

<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>

and in controller set F1s_Selection with wanted default value like this:

$scope.F1s_Selection = years[0];

Upvotes: 0

Exlord
Exlord

Reputation: 5371

The empty line is your default selected value because your model in empty. To have a default selected value you need to sassing a value to your model:

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

And also as @Alexis's answer use ng-options instead of ng-repeat. It has a better performance.

Upvotes: 1

user5527494
user5527494

Reputation:

please try 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>

Upvotes: 0

Related Questions