我试图为企业设定营业时间。结束时间应为开始时间后1小时,结束时间下拉列表不应显示开始时间/之前的值。 这是我的fiddle
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'
];
};
}
})();
}
function timePicker(){ var ddo = { 模板:'', 限制:' E', 要求:' ngModel', 替换:true, compile:compileFn }; 返回ddo;
import fake
答案 0 :(得分:3)
您必须编写自定义过滤器,以过滤选定开始时间之前的时间选项。
我已经为你做了。请参阅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;
}
};
})
我添加了时间比较的时刻。
指令模板将如下所示。
<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>
请参阅接受min
fromTime
属性