Отключить даты на основе выбора дня

Question

Отключить даты на основе выбора дня

0

У меня есть раскрывающийся список с днями недели. Я хочу, чтобы это произошло, когда я изменяю раскрывающийся список, это запустить метод $scope.disabled(). Таким образом, изменение статического числа в date.getDay() === 2 date.

Вы можете увидеть комментарии к этой функции $scope.disabled() того, что я хотел бы сделать.

Вот полуработающий Плункер.

Anele 03 июль 2015, в 18:08

Источник

Теги:

javascript

angularjs

angular-ui-bootstrap

1 ответ

Ещё вопросы

jme11 · Accepted Answer · 2015-07-03T19-51-00.000Z

Обновленный Plunker

В элементе select вы используете ngOptions, поэтому вы можете использовать select как часть выражения, чтобы значение каждого параметра было установлено на 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;
};

Я добавил проверку, чтобы установить значение дня равным 0, если пользователь не выбрал день, но вы можете альтернативно инициализировать значение select с помощью:

$scope.selectedDay = 0;

Теперь все это работает, но есть проблема: Datepicker запускает только отключенную функцию, когда она визуализируется, и вызывается внутренняя функция refreshView. Самый простой способ, с помощью которого я могу спровоцировать обновление программы datepicker, - изменить значение ng-модели. Для этого я добавил функцию:

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

Вызывая triggerDate в событии изменения элемента select, мы сбрасываем значение 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>