使用Javascript逐个点击后显示项目AngularJS

Question

我写了一个代码，它将显示从当前月份开始的未来12个月。假设，现在是2015年10月，所以它会显示所有未来12个月，即2016年10月。我将它列入清单。但是，我想创建一个启用左右箭头的框。点击左右箭头后会显示下一项。点击右箭头后会显示下一个项目，点击左箭头后会显示前一个项目。数据项目将显示在一个框中。请检查我的下面的代码，该代码将在未来12个月内打印出来。

angular.module('picker', []).controller('pickercontroller', function($scope) { 
 
    var date = new Date(); 
 
    var months = [], 
 
     monthNames = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", 
 
    "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]; 
 
    for(var i = 0; i <= 12; i++) { 
 
     months.push(monthNames[date.getMonth()] + ' ' + date.getFullYear()); 
 
     
 
     
 
     date.setMonth(date.getMonth() + 1); 
 
    } 
 
    $scope.months = months; 
 
});

<div ng-app="picker"> 
 
    <div ng-controller="pickercontroller"> 
 
    <li ng-repeat="currMonth in months">{{currMonth}}</li> 
 
    </div> 
 
</div>

此外，检查我的小提琴： - http://jsfiddle.net/abhijitloco/cqbqow2L/

Answer 1

检查这个代码，看你怎么可以通过更改选定月份NG单击

https://jsfiddle.net/jddg3som/

控制器

angular.module('picker', []).controller('pickerCtrl', function($scope) { 
    var date = new Date(); 
    var months = [], 
    monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", 
     "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" 
    ]; 
    for (var i = 0; i < 12; i++) { 
    months.push(monthNames[date.getMonth()] + ' ' + date.getFullYear()); 
    date.setMonth(date.getMonth() + 1); 
    } 

    $scope.changeMonth = function(steps) { 
    if ($scope.monthIndex + steps >= 0 && 
     $scope.monthIndex + steps <= 11 
    ) { 
     $scope.monthIndex = $scope.monthIndex + steps; 
     $scope.monthName = $scope.months[$scope.monthIndex]; 
    } 

    }; 

    $scope.monthIndex = 0; 
    $scope.months = months; 
    $scope.monthName = months[0]; 

}); 

查看

<div ng-app="picker"> 
    <div ng-controller="pickerCtrl"> 
    <h1> {{monthName}} </h1> 
    <button ng-click="changeMonth(1);">Next Month</button> 
    <button ng-click="changeMonth(-1);">Previous Month</button> 
    <li ng-repeat="currMonth in months">{{currMonth}}</li> 
    </div> 
</div> 

Answer 2

使用ng-click处理按钮事件，并于下月检查下个月是否months阵列或不可用。如果可用，则从数组中设置下个月。

同为前一个月

angular.module('picker', []).controller('pickercontroller', function($scope) { 
 
    var date = new Date(); 
 
    var months = [], 
 
    monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", 
 
     "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" 
 
    ]; 
 
    for (var i = 0; i <= 12; i++) { 
 
    months.push(monthNames[date.getMonth()] + ' ' + date.getFullYear()); 
 
    date.setMonth(date.getMonth() + 1); 
 
    } 
 
    $scope.months = months; 
 
    $scope.currMonth = months[0]; 
 
    $scope.nextMonth = nextMonth; 
 
    $scope.prevMonth = prevMonth; 
 

 
    function prevMonth() { 
 
    var index = $scope.months.indexOf($scope.currMonth); 
 
    if (index != 0 && index < $scope.months.length) { 
 
     $scope.currMonth = $scope.months[index - 1]; 
 
    } 
 
    } 
 

 
    function nextMonth() { 
 
    var index = $scope.months.indexOf($scope.currMonth); 
 
    if (index < $scope.months.length - 1) { 
 
     $scope.currMonth = $scope.months[index + 1]; 
 
    } 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="picker"> 
 
    <div ng-controller="pickercontroller"> 
 
    <p>{{currMonth}}</p> 
 
    <button ng-click="prevMonth()">Previous Month</button> 
 
    <button ng-click="nextMonth()">Next Month</button> 
 
    </div> 
 
</div>