根据日期选择禁用日期

Question

我有一个星期几的下拉菜单。 我想发生的是，当我更改下拉菜单时，运行$scope.disabled()方法。 从而更改date.getDay() === 2日期中的静态数字。

您可以在$scope.disabled()函数中看到我想做的评论。

这是一个半工作的柱塞。

Answer 1

更新的柱塞

在您的select元素中，您使用的是ngOptions ，因此您可以将select用作表达式的一部分，以将ng-options="day.id as day.name for day in daysOfWeek"设置为id ng-options="day.id as day.name for day in daysOfWeek" 。 因此，现在，每次更改选择时，selectedDay的值都会更新，并且摘要开始。 这意味着您不必看任何东西，并且可以将您的禁用功能简化如下：

$scope.disabled = function(date, mode) {
   var day = angular.isUndefined($scope.selectedDay) ? 0 : $scope.selectedDay;
  if (mode === 'day' && date.getDay() === $scope.selectedDay) {
    return true;
  }
  return;
};

我添加了一个检查以将day的值设置为0以防用户没有选择一天，但是您也可以使用以下方法初始化select的值：

$scope.selectedDay = 0;

现在所有这些都可以使用，但是有一个问题：datepicker仅在呈现它并调用其内部refreshView函数时运行禁用的函数。 我可以想到以编程方式触发datepicker刷新的最简单方法是更改​​其ng-model值。 为此，我添加了一个函数：

$scope.triggerDate = function(date) {
  $scope.dt = new Date(date);
}

通过在select元素的change事件上调用triggerDate，我们用当前选择的日期重置datepicker的值（因此我们根本不会更改该值），这足以强制刷新指令。 因此，最终选择如下所示：

<select class="form-control input-sm" ng-model="selectedDay" ng-options="day.id as day.name for day in daysOfWeek" ng-change="triggerDate(dt)"></select>