CODEWITHSUNDEEP
javascriptcssangularjsdrop-down-menuangularjs-ng-options
Bonnard
Bonnard

Reputation: 389

select ng-options list of years and see current year by default

I am using select and ng-options in angularjs to show a list of years that I construct myself.

here is the plunker link.

My question is:

How to show the current year if you click on the dropdown list? I mean, supposing where are in 2017, when the user clicks, the default choice will be 2017 which will be situated in the middle of the list. the list will be in chronological order, starting from 20 years before current year and ending 20 years after current year. In other words, by clicking on the list the first visible default choice will be current year, and the user can roll up and down the years.

var app = angular.module('app', []);

app.controller('MyCtrl', function($scope) {
    $scope.dates = {};
    $scope.years = [{value: 'Year', disabled: true}];
    var current_year = new Date().getFullYear();
    for(var i = current_year - 20; i <= current_year + 20; i++){
        $scope.years.push({value: i + ''});
    }

});
   <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
   <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>

<body ng-app="app">
 <div ng-controller="MyCtrl">

        <label class="control-label">Year</label>
  <select name="startYear" ng-model="dates.startYear" id="startYear"
          ng-options="year.value as year.value disable when year.disabled for year in years"
          required>
      <option value="" disabled >Choose one</option>
  </select>
</div>
</body>

update 1:

to clear up the misunderstanding, I want to center the list on the current year ONLY when the list is clicked, otherwise, the default SHOWN value is "choose one", but the default view should be centered on current year when the list is opened.

update 2:

Here is my dropdown menu:

http://preview.themeforest.net/item/cliptwo-bootstrap-admin-template-with-angularjs/full_screen_preview/10290688

Go to Forms / Form Wizard / Step 3 Billings

enter image description here

The default value in this above link is the word "Year", but when clicked, the list of years open up, and the list is not centered on the current year. Suppose we have 40 years before current year and 40 years after, then the user has to scroll down to current year interminably. So the idea is to center to the current year when the box is clicked. here is the css file that is related to it, link css.

Upvotes: 0

Views: 6130

Answers (1)

Jesus Carrasco
Jesus Carrasco

Reputation: 1354

You'll need to get the current date first before getting the full year. The code is found below. Also, do modify your years.value to be an integer, and assign immediately to your ng-model (dates.startYear). And voila! Hope this helps. 

   var app = angular.module('app', []);

    app.controller('MyCtrl', function($scope) {
    $scope.dates = {};
    $scope.years = [{value: 'Year', disabled: true}];
    for(var i = 1990; i <= 2040; i++){
        $scope.years.push({value: i});

    }

    var d = new Date();
    var n = d.getFullYear();

    $scope.dates.startYear = n;
    console.log(n);

    });

Here is the plnkr example.

UPDATE

Here is a plnk update.

Basically, I put it in a function and fires on ng-click in the select.

Upvotes: 1

Related Questions