4

What is the best way to create drop downs with numbers representing the next 20 years using ng-repeat on AngularJS? It would be good to get the first year (the current year) dynamically.

And what about a drop down with the months of the year (1..12) using the iterator?

NOTE: I found a good idea here: http://www.zzzxo.com/q/answers-angularjs-for-loop-with-numbers-ranges-11873570.html

However, I wonder if there is a shorter way.

Dan
  • 59,490
  • 13
  • 101
  • 110
Fabio Nolasco
  • 7,122
  • 6
  • 35
  • 32

4 Answers4

14

This would be a good opportunity to create a directive for reusability. Here is an example for years, and the same type of thing could be done for months. Use ng-options instead of ng-repeat.

HTML:

<div year-drop offset="0" range="20"></div>

Directive:

angular.module('myapp',[]).directive('yearDrop',function(){
    function getYears(offset, range){
        var currentYear = new Date().getFullYear();
        var years = [];
        for (var i = 0; i < range + 1; i++){
            years.push(currentYear + offset + i);
        }
        return years;
    }
    return {
        link: function(scope,element,attrs){
            scope.years = getYears(+attrs.offset, +attrs.range);
            scope.selected = scope.years[0];
        },
        template: '<select ng-model="selected" ng-options="y for y in years"></select>'
    }
});

Here is a fiddle

Dan
  • 59,490
  • 13
  • 101
  • 110
  • I guess you guys are right. There is no out of the box solution for that. So considering the answers, I think sh0ber had the best idea, getting the number range suggested by Jakemmarsh and putting it into a directive to make it re-usable. Thank you guys! – Fabio Nolasco Jun 12 '13 at 11:26
  • 1
    Great answer. with that approach, how do you specify the ng-model dynamically? – Chris Landeza Jun 27 '16 at 03:13
  • 1
    @ChrisLandeza: Read up on directives to learn how to pass in and bind to models within a containing scope/controller. You'll need to use the `scope:{}` property in the directive's `return` object to specify a binding. You can [check this fiddle](http://jsfiddle.net/sh0ber/1a83mdun/3/). You can also [read more here](http://stackoverflow.com/questions/14050195/angularjs-what-is-the-difference-between-and-in-directive-scope) – Dan Jun 28 '16 at 14:11
  • How to do this same without angular directive. using function within angular controller – user1030181 Mar 12 '17 at 13:44
3

You could first get the current year as a Javascript date object, then use a for loop to find the next nineteen sequential years. Then, pass these as an array to the view.

Controller:

var year = new Date().getFullYear();
var range = [];
range.push(year);
for(var i=1;i<20;i++) {
  range.push(year + i);
}
$scope.years = range;

View:

<select ng-options="year for year in years">
</select>

and if I understand you correctly, a similar approach to make a months dropdown controller:

var range = [];
for(var i=1;i<13;i++) {
  range.push(i);
}
$scope.months = range;
Jakemmarsh
  • 4,601
  • 12
  • 43
  • 70
0

I would think something like this is pretty straightforward

Controller:

$scope.years = [2013, 2014, 2015...]

View:

<select ng-options="year for year in years">
</select>
Terry
  • 14,099
  • 9
  • 56
  • 84
-1

This will be your view part 

<select ng-options="month as month.title for month in proficiencyMatrixCtrl.months track by month.id" ng-model="<your controller_name>.currentMonth" 
ng-change="<your_controller>.<your_controller_inside_function()">
</select>

Need to get value in the controller function by using below syntax:

console.log($scope.currentCurrent);
teo van kot
  • 12,350
  • 10
  • 38
  • 70
tech share
  • 1