0
II'm當前正在使用小時和分鐘選擇器，其中人們可以選擇時間範圍。選擇開始時間後，時間選項會自動更新，以便您不能選擇時間小於時間的時間。Angularjs第一次無法在下拉菜單中選擇最後一個項目
我偶然發現了一些令我困擾的事情。在我的下拉菜單中，每當我選擇最後一個選項時，第一次都沒有發生。如果我再次選擇它，它會被選中。如果我選擇其他選項，第一次就可以正常工作。 我可以在HTML中看到，值設置爲數字：第一次選擇最後一個選項。
這是我的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>
這是我的指令：
//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來說，所以我可能會犯一些明顯的錯誤 - 我只是看不到它們。我是例如我在配置參數中指定了可選配置參數的方式相當不確定，但是如果我刪除它們或將它們更改爲=，它似乎無法幫助我解決問題。代替 @。
我做了一個簡單的plkr顯示，這是莫名其妙angularjs 1.25和1.26之間引入 - http://plnkr.co/edit/9JOoj8sV21slvSU7hBiH?p=preview