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

Answer 2

我会在您的范围内创建一个数组，甚至创建某种“ DateService”，其中包含基于您所在的当前日期/星期的每个按钮所需的所有相关位。将数组中的每个元素都视为按钮的配置。

要生成当前的“星期”，您可以使用moment来确定一周的开始和结束，然后枚举介于两者之间的每一天以构建一个数组。

$scope.weekDays = //TODO: find start/end of week, and build a list of days for current week;
$scope.dateButtons = weekDays.map(function(day){
     return
     {
          date: day,
          isEnabled: day < moment(currentDate).add(-1, 'days'),
          func: function() { /* do stuff on click? */},
          etc...
     }
});

然后使用ng-repeat将该数组绑定到按钮模板。

<button ng-repeat="date in dateButtons" ng-disabled="!date.isEnabled" ng-click="date.func()"><strong>{{date.startTime}}</strong> <br> <b>{{date.endTime}}</b></button>

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

2 个答案: