javascript - 在 AngularJS 上使用 nd-repeat 创建带有代表未来 20 年的数字的下拉列表的最佳方法是什么？

Question

ng-repeat在 AngularJS 上使用代表未来 20 年的数字创建下拉列表的最佳方法是什么？动态获取第一年（当年）会很好。

那么使用迭代器在一年中的月份（1..12）下降呢？

注意：我在这里找到了一个好主意： http ://www.zzzxo.com/q/answers-angularjs-for-loop-with-numbers-ranges-11873570.html

但是，我想知道是否有更短的方法。

Answer 1

这将是创建可重用性指令的好机会。这是一个多年的例子，同样类型的事情可以做几个月。使用ng-options而不是ng-repeat.

HTML：

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

指示：

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>'
    }
});

这是一个小提琴

Answer 2

您可以首先将当前年份作为 Javascript 日期对象获取，然后使用 for 循环查找接下来的 19 个连续年份。然后，将这些作为数组传递给视图。

控制器：

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

看法：

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

如果我理解正确的话，一个类似的方法来制作一个月的下拉控制器：

var range = [];
for(var i=1;i<13;i++) {
  range.push(i);
}
$scope.months = range;

Answer 3

我认为这样的事情很简单

控制器：

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

看法：

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

Answer 4

这将是您的视图部分

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

需要使用以下语法在控制器函数中获取值：

console.log($scope.currentCurrent);