Question

我正在尝试使用Angular 1和Bootstrap构建嵌入式日历对象我有这行代码来显示本周的日子：

<span class="day" ng-class="{ today: day.isToday, 'different-month': !day.isCurrentMonth, selected: day.date.isSame(selected), available: day.isAvailable }" ng-repeat="day in week.days">{{day.number}}</span>

和day.isAvailable在第一个月正确设置： first month correct highlighting

然而，几个月后突出显示是错误的，我无法弄清楚原因 month+1 wrong highlighting

isAvailable: daysAvailable.indexOf(date.format("dd").substring(0, 2)) > -1,

我愿意更新其他可能有必要回答的代码

Answer 1

我认为您没有正确使用ng-class。请阅读de docs以了解它是如何工作的。

https://docs.angularjs.org/api/ng/directive/ngClass

修改

根据你在评论中给出的答案，我最终得到了这个解决方案：

＆＃13;

var myApp = angular.module('myApp', []);

myApp.controller('myAppController', ['$scope', function($scope){
  $scope.selected = undefined;
  $scope.week = {
    days: [
      new day(2016, 04, 15, false),
      new day(2016, 04, 16, true),
      new day(2016, 04, 17, true),
      new day(2016, 04, 18, true),
      new day(2016, 04, 19, true),
      new day(2016, 04, 20, true),
      new day(2016, 04, 21, false),
      new day(2016, 04, 22, false),
      new day(2016, 04, 23, true),
      new day(2016, 04, 24, true),
      new day(2016, 04, 25, true),
      new day(2016, 04, 26, true),
      new day(2016, 04, 27, true),
      new day(2016, 04, 28, false),
      new day(2016, 04, 29, false),
      new day(2016, 04, 30, true),
      new day(2016, 04, 31, true),
      new day(2016, 05, 01, true),
      new day(2016, 05, 02, true),
      new day(2016, 05, 03, true),
      new day(2016, 05, 04, false)
    ]
  };
  $scope.selectDay = function(d){
    $scope.selected = d;
  }
}]);
  
function day(year, month, day, avaiable){
  var self = this;
  self.date = new Date(year, month, day);
  self.isAvailable = avaiable;
  self.number = self.date.getDate();
  self.isCurrentMonth = isCurrentMonth(self.date);
  self.isToday = isToday(self.date);
};

function isToday(date){
    var d = new Date();
    return date.getFullYear() === d.getFullYear()
      && date.getMonth() === d.getMonth()
      && date.getDate() === d.getDate();
  }

function isCurrentMonth(date){
    var d = new Date();
    return date.getFullYear() === d.getFullYear()
      && date.getMonth() === d.getMonth();
}

Date.prototype.isSame = function(d){
  if(!d){
    return false;
  } else {
    return this.getFullYear() === d.date.getFullYear()
    && this.getMonth() === d.date.getMonth()
    && this.getDate() === d.date.getDate();
  }
}

＆＃13;

.day{
  height: 20%;
  width: 10%;
  float: left;
  background: gray;
}

.today{
  background: orange !Important;
}

.different-month{
  background: #e5e5e5 !Important;
}

.selected{
  background: yellow !Important;
}

.available{
  background: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">
  <div ng-controller="myAppController">

    <span 
          class="day" 
          ng-class="{ 
                    'today': day.isToday,
                    'different-month': !day.isCurrentMonth,
                    'selected': day.date.isSame(selected),
                    'available': day.isAvailable
                    }"
          ng-repeat="day in week.days"
          ng-click="selectDay(day)"
    >{{day.number}}</span>
  
  </div>
</div>

＆＃13;

刷新使用ng-class创建的类

1 个答案: