我正在尝试为企业设置营业时间。结束时间应为开始时间后的 1 小时,结束时间下拉列表不应显示开始时间/之前的值。这是我的小提琴
(function() {
'use strict';
angular.module('agencyApp', [])
.controller('HoursController', HoursController)
.directive('timePicker', timePicker);
function HoursController() {
var vm = this;
vm.print = function() {
console.log(vm);
};
vm.setClosed = setClosed;
vm.setAllWeekdayClosed = setAllWeekdayClosed;
vm.weekdays = [{
Day: 'Monday',
fromTime: "Select",
toTime: "Select"
}, {
Day: 'Tuesday',
fromTime: "Select",
toTime: "Select"
}, {
Day: 'Wednesday',
fromTime: "Select",
toTime: "Select"
}, {
Day: 'Thursday',
fromTime: "Select",
toTime: "Select"
}, {
Day: 'Friday',
fromTime: "Select",
toTime: "Select"
}, {
Day: 'Saturday',
fromTime: "closed",
toTime: "closed"
}, {
Day: 'Sunday',
fromTime: "closed",
toTime: "closed"
}];
vm.closed = [
false, false, false, false, false, true, true
];
function setClosed(index) {
if (vm.closed[index]) {
vm.weekdays[index].toTime = vm.weekdays[index].fromTime = 'closed';
}
if (!vm.closed[index]) {
vm.weekdays[index].fromTime = 'Select';
vm.weekdays[index].toTime = 'Select';
}
};
function setAllWeekdayClosed(index) {
if (vm.closed[index]) {
vm.weekdays[index].toTime = vm.weekdays[index].fromTime = 'closed';
}
if (!vm.closed[index]) {
vm.weekdays[index].fromTime = '7:00 am';
vm.weekdays[index].toTime = '3:00 pm';
}
};
}
函数 timePicker(( { var ddo = { 模板:", 限制:"E", 要求:"ngModel", 替换:真, 编译:编译Fn }; 返回 DDO;
function compileFn(tElement, tAttrs) {
tElement.attr('ng-model', tAttrs.ngModel);
//tElement.attr('ng-disabled', tAttrs.ngModel + ' === "closed"');
return linkFn;
};
function linkFn(scope, element, attrs) {
scope.timings = ['Select', '12:15 am', '12:30 am', '12:45 am',
'1:00 am', '1:15 am', '1:30 am', '1:45 am',
'2:00 am', '2:15 am', '2:30 am', '2:45 am',
'3:00 am', '3:15 am', '3:30 am', '3:45 am',
'4:00 am', '4:15 am', '4:30 am', '4:45 am',
'5:00 am', '5:15 am', '5:30 am', '5:45 am',
'6:00 am', '6:15 am', '6:30 am', '6:45 am',
'7:00 am', '7:15 am', '7:30 am', '7:45 am',
'8:00 am', '8:15 am', '8:30 am', '8:45 am',
'9:00 am', '9:15 am', '9:30 am', '9:45 am',
'10:00 am', '10:15 am', '10:30 am', '10:45 am',
'11:00 am', '11:15 am', '11:30 am', '11:45 am',
'12:00 pm', '12:15 pm', '12:30 pm', '12:45 pm',
'1:00 pm', '1:15 pm', '1:30 pm', '1:45 pm',
'2:00 pm', '2:15 pm', '2:30 pm', '2:45 pm',
'3:00 pm', '3:15 pm', '3:30 pm', '3:45 pm',
'4:00 pm', '4:15 pm', '4:30 pm', '4:45 pm',
'5:00 pm', '5:15 pm', '5:30 pm', '5:45 pm',
'6:00 pm', '6:16 pm', '6:30 pm', '6:45 pm',
'7:00 pm', '7:15 pm', '7:30 pm', '7:45 pm',
'closed'
];
};
}
})();
您必须编写一个自定义过滤器来过滤掉所选开始时间之前的时间选项。
我已经为你做到了。请参考 jsFiddle
angular.module('agencyApp', [])
.controller('HoursController', HoursController)
.directive('timePicker', timePicker)
.filter('timeFilter', function () {
return function (input, filterCriteria) {
if (filterCriteria && filterCriteria !== "Select") {
input = input || [];
if (filterCriteria === 'closed') {
return ['closed'];
}
var out = [];
input.forEach(function (time) {
if (moment(time, 'h:mm a').isAfter(moment(filterCriteria, 'h:mm a'))) {
out.push(time);
}
});
return out;
} else {
return input;
}
};
})
我添加了用于时间比较的momentjs。
指令模板将如下所示。
<select class="input-small" ng-options="time as time for time in timings | timeFilter:min"></select>
现在指令将使用min
属性进行过滤。
scope:{
min: '='
}
用法
<time-picker ng-model="vm.weekdays[$index].toTime" id="aid-to-{{$index}}" name="to" min="vm.weekdays[$index].fromTime"></time-picker>
请参阅接受fromTime
的min
属性