单击使用Javascript AngularJS重置该值

时间:2015-10-31 12:06:20

标签: javascript html angularjs

在我的日历日期和时间段中显示。在标题月中将显示名称,日期将在下面显示为列表。选择日期后,时间段将到来。此外,在显示时间段时,所选日期将以MonthName显示。现在,如果您在时间列表页面中单击MonthName(在标题中),则将通过替换次数来显示该月的日期。假设你去11月选择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);

Plunker Link: - http://plnkr.co/edit/35UwiYLEqv3LYY6RiL1q?p=preview

2 个答案:

答案 0 :(得分:0)

我认为您需要将用户选择的自定义月份值与单击标题时显示的月份值分开。

您应该用功能替换ng-click。

<h3 class="text-center" ng-click="clickMonth()"> {{selectedMonthName}} </h3>

在你的js:

$scope.clickMonth = function (){
$scope.selectedMonthName = $scope.monthName;
$scope.showType = 1;
}

同时更新你的selectDate()函数:

 $scope.selectedMonthName = $filter('date')(date, 'dd MMM yyyy');

你的changeMonth()函数:

 $scope.selectedMonthName = $scope.monthName;

Plunkr right here

答案 1 :(得分:0)

按以下方式更改您的代码:

$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>

这样一来,当你点击时会执行一个函数,在点击标题时为你提供更多的选项。