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