javascript - 使用 Javascript AngularJS 单击重置值

Question

我的日历中显示了日期和时段。在标题中，月份名称将显示，日期将显示在下面的列表中。选择日期后，时间段就会出现。此外，在显示时间段时，所选日期将与月份名称一起显示。现在，如果您在时间列表页面中单击月份名称(在标题中)，则该月的日期将通过替换时间来显示。假设您转到 Nov 并选择 11 月 1 日，则标题中将显示 2015 年 11 月 1 日，并且下方将显示时间段。现在再次单击标题(2015 年 11 月 1 日)，将显示 11 月的日期。但我想从 MonthName 标题中删除 01 的日期，同时显示时间页面中的日期。不知何故，当它返回以显示时间页面的日期时，我需要重置 MonthName 标题中选定的日期值。下面是获取月份名称的代码，我在下面添加了 plunker。

var date = new Date();
    var months = [],
        monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    var tempMonth;
    tempMonth = date.getMonth();
    for (var i = 0; i <= 12; i++) {
        months.push(monthNames[tempMonth] + ' ' + date.getFullYear());
        tempMonth += 1;
        if (tempMonth >= 12) {
          tempMonth = 0;
          date.setFullYear(date.getFullYear() + 1);
        }
    }
    $scope.year = 2015;
    $scope.changeMonth = function(steps) {
        if ($scope.monthIndex + steps >= 0 && $scope.monthIndex + steps <= 12) {
            $scope.dateValues = [];
            $scope.monthIndex = $scope.monthIndex + steps;
            $scope.monthName = $scope.months[$scope.monthIndex];
            var date = new Date();
            console.log(date.getMonth());
            var offset = date.getMonth()
            console.log($scope.monthIndex);
            var offsetDate = offset + $scope.monthIndex;
            $scope.nDays = new Date($scope.year, offsetDate + 1, 0).getDate();
            console.log(offsetDate + 1);
            console.log(new Date($scope.year, offsetDate, 1));
            for (i = 1; i <= $scope.nDays; i++) {
                var d = new Date();
                d.setHours(0, 0, 0, 0);
                var displayDate = new Date($scope.year, offsetDate, i);
                if (displayDate >= d) $scope.dateValues.push(displayDate);
            }

        } else {
            console.log("missed")
        }
    };

    $scope.monthIndex = 0;
    $scope.months = months;
    $scope.monthName = months[0];
    $scope.changeMonth(0);

笨蛋链接:- http://plnkr.co/edit/35UwiYLEqv3LYY6RiL1q?p=preview

Answer 1

按以下方式更改代码:

$scope.changeShowType = function (type) {
  $scope.showType = type;
  $scope.monthName = $filter('date')($scope.selected.date, 'MMM yyyy');
};

并在你的index.html中将该行更改为:

<h3 class="text-center" ng-click="changeShowType(1)"> {{monthName}} </h3>

这样，当您单击时就会执行一个函数，从而在单击标题时为您提供更多执行操作的选项。