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

另外，检查我的 fiddle :- http://jsfiddle.net/abhijitloco/cqbqow2L/

Answer 1

检查此代码以了解如何通过 ng-click 更改所选月份

https://jsfiddle.net/jddg3som/

Controller

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>