javascript - 根据angularjs中的当前日期传递启用和禁用按钮

Question

我必须安排一周，我想根据日期禁用按钮，即如果今天日期过去，那么以前的按钮见图像:

这里是html代码:

    <div id="container" style=" width: 861px; margin-top: 2em; margin-  left: 5em;">


        <button ng-click="previousWeek(weekDays[0])" style="margin-right: 3em;">Previous</button>

        <div ng-repeat="day in weekDays track by day" style="  display: -webkit-inline-box;  font-size: 16px;    width: 95px; ">
        {{day}}
        </div>

        <button ng-click="nextWeek(weekDays[6])" style="    margin-left: 1em;">Next</button>


    </div>


  <button ng-disabled="checkDate('2016-06-27')" ng-click="myFunc()" style="margin-left:190px; font-size:8.5px;     background-color: antiquewhite;
        border-color: white;"><strong>9:00Am-1:00PM</strong> <br><b>5:00PM-8:00PM</b></button>

  <button ng-disabled="checkDate('2016-06-28')" ng-disabled="checkDate()" ng-click="myFunc()" style="margin-left:8px; font-size:8.5px;     background-color: antiquewhite;
        border-color: white;"><strong>9:00Am-1:00PM</strong> <br> <b>5:00PM-8:00PM</b></button>

  <button ng-disabled="checkDate('2016-06-29')"  ng-click="myFunc()" style="margin-left:8px; font-size:8.5px;     background-color: antiquewhite;
        border-color: white;"><strong>9:00Am-1:00PM</strong> <br> <b>5:00PM-8:00PM</b></button>

  <button  ng-disabled="checkDate('2016-06-30')"  ng-click="myFunc()" style="margin-left:4px; font-size:8.5px;     background-color: antiquewhite;
        border-color: white;"><strong>9:00Am-1:00PM</strong> <br> <b>5:00PM-8:00PM</b></button>

  <button ng-disabled="checkDate(2016-07-02)"  ng-click="myFunc()" style="margin-left:12em; font-size:8.5px;     background-color: antiquewhite;
        border-color: white;"><strong>9:00Am-1:00PM</strong> </button>

演出日期脚本:

  var currentDate = moment();


  $scope.nextWeek = function(dt) {
        $scope.weekDays = fnWeekDays(moment(dt, "MMMM Do,dddd").add(1, 'days'));
      };
        // console.log($scope.weekDays);
  $scope.previousWeek = function(dt) {
        $scope.weekDays = fnWeekDays(moment(dt, "MMMM Do,dddd").subtract(2, 'days'));
      };
   var fnWeekDays = function(dt) {
      var currentDate = dt;
      var weekStart  = currentDate.clone().startOf('week');
      var weekEnd = currentDate.clone().endOf('week');
        // console.log(weekStart);
      var days = [];

      for (var i = 1; i <= 7; i++) {

          days.push(moment(weekStart).add(i, 'days').format("MMM Do dddd"));

          };

      return days;
    };



    function getdate()  {                            
     var currentDate = moment();

      // console.log(moment(currentDate).add(-1, 'days'));
      // console.log(moment(currentDate));

    $scope.weekDays = fnWeekDays(currentDate);
    $scope.nextWeek(currentDate);
    $scope.previousWeek(currentDate); 

              // console.log(moment($scope.weekDays).add(-1, 'days'));

    $scope.days =   fnWeekDays(currentDate);
    return $scope.days;
 };

 getdate();

此处为按钮检查条件:

 var currentDate = new Date();

$scope.date1 = moment(currentDate).add(-1, 'days');

$scope.checkDate = function(buttonDate){


  $scope.date = moment(new Date(buttonDate));               //print button dates
  // console.log($scope.date);

  if ($scope.date < $scope.date1) {

     return true;
  }
  else
  {
     return false;
  }
}

我不知道如何让条件自动检查日期

以便所有按钮仅启用以前的按钮禁用。

我在 buuton 条件下进行硬编码，但我想消除所有硬编码。

帮帮我。

Answer 1

不要两次使用 ng-disable，而是使用自定义 directive:

.directive('disabledEle', function() {
                    return {
                        restrict: 'EA',
                        link: function(scope, element, attrs) {
                            //create a function that check if dates pass - checkDate                            
                            if($scope.checkDate(element)) {
                                element.attr('disabled', 'disabled');
                            } else {
                                element.removeAttr('disabled');
                            }
                        }
                    }
                });

并将其应用于您的 HTML:

<button disabled-ele="('2016-06-27')" ng-click="myFunc()" style="margin-left:190px; font-size:8.5px;     background-color: antiquewhite;
        border-color: white;"><strong>9:00Am-1:00PM</strong> <br><b>5:00PM-8:00PM</b></button>

您现在需要做的就是创建 $scope.checkDate