基於日期選擇禁用日期

Question

我有一週下拉式選擇。我想要發生的是，當我更改下拉列表時，將運行$scope.disabled()方法。從而更改date.getDay() === 2日期的靜態數字。

你可以看到我想要做的$scope.disabled()函數的註釋。

Here is a half-working Plunker.

Answer 1

Updated Plunker

在您選擇的元素，你使用ngOptions，這樣你就可以使用表達式的選擇爲部分有使用設置爲ID每個選項的值ng-options="day.id as day.name for day in daysOfWeek"。所以，現在，每當你改變select時，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，但你可以或者初始化選擇與價值：

$scope.selectedDay = 0; 

現在所有的作品，但有一個問題：日期選擇器只運行呈現時其內部refreshView函數被調用禁用功能。我認爲以編程方式觸發datepicker刷新的最簡單方法是更改​​其ng模型值。要做到這一點，我添加了一個功能：

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

通過在選擇元素的變化事件調用triggerDate，我們與當前選定的日期（所以我們不會改變價值可言）重置日期選擇器的值，這足以強制刷新指令。因此，最終的選擇如下所示：

<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>