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