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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17052967/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 06:55:39  来源:igfitidea点击:

What is the best way to create drop downs with numbers representing the next 20 years using nd-repeat on AngularJS?

javascripthtmlangularjsangularjs-directiveng-options

提问by Fabio Nolasco

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

ng-repeat在 AngularJS 上使用代表未来 20 年的数字创建下拉菜单的最佳方法是什么?动态获取第一年(当前年份)会很好。

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

那么使用迭代器下拉一年中的月份 (1..12) 怎么样?

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

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

However, I wonder if there is a shorter way.

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

回答by Dan

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-optionsinstead of ng-repeat.

这将是创建可重用性指令的好机会。这是一个多年的例子,同样的事情可以做几个月。使用ng-options代替ng-repeat

HTML:

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

这是一个小提琴

回答by Jakemmarsh

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.

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

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;

回答by Terry

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>

回答by tech share

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