0
현재 시간을 선택할 수있는 시간과 분 선택기가 있습니다. 시작 시간을 선택하면 시간 옵션이 자동으로 업데이트되므로 시간에서보다 작은 시간을 선택할 수 없습니다.처음 Angularjs는 드롭 다운에서 마지막 항목을 선택할 수 없습니다.
나는 정말로 나를 괴롭히는 것을 발견했습니다. 내 드롭 다운에서 마지막 옵션을 선택할 때마다 처음에는 아무 일도 일어나지 않습니다. 다시 선택하면 선택됩니다. 다른 옵션을 선택하면 처음에는 모든 것이 잘 작동합니다. HTML에서 볼 수 있습니까? 값은 숫자로 설정됩니다. 첫 번째 옵션은 마지막 옵션을 선택하는 것입니다. 이것은 내 지시어입니다
<div hour-and-minute-range-selector selected-from="spotFrom" selected-from-minute="spotFromMinute" selected-to="spotTo" selected-to-minute="spotToMinute" from-min-hour="0" from-max-hour="23" to-min- hour="0" to-max-hour="24"></div>
:
이
내 HTML입니다//Default behaviour is minute steps of 15 minutes (quarters)
app.directive('hourAndMinuteRangeSelector', function() {
return {
restrict: 'A',
templateUrl: 'directiveTemplates/hourAndMinuteRangeTemplate.html',
scope: {
selectedFrom: '=',
selectedTo: '=',
selectedFromMinute: '=',
selectedToMinute: '=',
fromMaxHour: '@',
fromMinHour: '@',
toMaxHour: '@',
toMinHour: '@',
fromMaxMinute: '@',
fromMinMinute: '@',
toMaxMinute: '@',
toMinMinute: '@',
minuteStep: '@'
},
link: function (scope, elem, attrs) {
scope.fromHours = [];
scope.fromMinutes = [];
scope.toHours = [];
scope.toMinutes = [];
if (!scope.fromMaxHour) {
scope.fromMaxHour = 24;
}
if (!scope.toMaxHour) {
scope.toMaxHour = 24;
}
if (!scope.fromMinHour) {
scope.fromMinHour = 0;
}
if (!scope.toMinHour) {
scope.toMinHour = 0;
}
if (!scope.fromMaxMinute) {
scope.fromMaxMinute = 59;
}
if (!scope.toMaxMinute) {
scope.toMaxMinute = 59;
}
if (!scope.fromMinMinute) {
scope.fromMinMinute = 0;
}
if (!scope.toMinMinute) {
scope.toMinMinute = 0;
}
if (!scope.minuteStep) {
scope.minuteStep = 15; //Default to quarters
}
for (var i = scope.fromMinHour; i <= scope.fromMaxHour; i++) {
scope.fromHours.push(i);
}
for (var h = scope.toMinHour; h <= scope.toMaxHour; h++) {
scope.toHours.push(h);
}
for (var j = scope.fromMinMinute; j <= scope.fromMaxMinute; j = j + scope.minuteStep) {
scope.fromMinutes.push(j);
}
for (var k = scope.toMinMinute; k <= scope.toMaxMinute; k = k + scope.minuteStep) {
scope.toMinutes.push(k);
}
scope.$watch('selectedFrom', function (newVal, oldVal) {
if (newVal != oldVal) {
//If the last minute step has been selected, then the toHour must be higher than the from
if (scope.selectedFromMinute == _.last(scope.fromMinutes)) {
scope.toMinHour = scope.selectedFrom + 1;
} else {
scope.toMinHour = scope.selectedFrom;
}
if (scope.selectedTo < scope.toMinHour) {
scope.selectedTo = null;
}
scope.toHours = [];
for (i = scope.toMinHour; i <= scope.toMaxHour; i++) {
scope.toHours.push(i);
}
}
});
scope.$watch('selectedFromMinute', function (newVal, oldVal) {
if (newVal != oldVal && scope.selectedFrom) {
//If the last minute step has been selected, then the toHour must be higher than the from
if (scope.selectedFromMinute == _.last(scope.fromMinutes) &&
scope.selectedFrom == scope.selectedTo) {
scope.toMinHour = scope.selectedFrom + 1;
} else {
scope.toMinHour = scope.selectedFrom;
}
if (scope.selectedTo < scope.toMinHour) {
scope.selectedTo = null;
}
scope.toHours = [];
for (i = scope.toMinHour; i <= scope.toMaxHour; i++) {
scope.toHours.push(i);
}
}
});
}
};
});
그리고 이것은 템플릿입니다 :
<div class="input-group input-group-sm form-inline">
<select class="form-control" ng-options="hour|timeformat for hour in fromHours" ng-model="selectedFrom" style="height: 30px;"></select>
<span class="input-group-addon" style="border-left: 0; border-right: 0; height: 30px;">-</span>
<select class="form-control" ng-options="minute|timeformat for minute in fromMinutes" ng-model="selectedFromMinute" style="height: 30px;"></select>
</div>
<div class="input-group input-group-sm form-inline">
<select class="form-control" ng-options="hour|timeformat for hour in toHours" ng-model="selectedTo" style="height: 30px;"></select>
<span class="input-group-addon" style="border-left: 0; border-right: 0; height: 30px;">-</span>
<select class="form-control" ng-options="minute|timeformat for minute in toMinutes" ng-model="selectedToMinute" style="height: 30px;"></select>
</div>
내가 차라리 새로 온 것을 고백해야 Angularjs에, 그래서 나는 명백한 실수를 한 것일 수도 있습니다 - 나는 그들을 볼 수 없습니다. 나는 예. 내가 지시문에 선택적 구성 매개 변수를 만든 방식에 대해서는 상당히 불확실하지만, 제거하거나 변경하면 내 문제에 도움이되지 않는 것 같습니까? 대신에 @. 이 AngularJS와 1.26에 도입 된 오류가 것 같다 http://plnkr.co/edit/9JOoj8sV21slvSU7hBiH?p=preview