Question

II＆＃39;目前正在研究一个小时和分钟选择器，其中可以选择时间范围。选择“从时间”后，“时间”选项会自动更新，因此您无法选择时间小于时间的时间。

我偶然发现了让我困扰的事情。在我的下拉菜单中，每当我选择最后一个选项时，第一次都没有任何反应。如果我再次选择它，它会被选中。如果我选择任何其他选项，第一次一切正常。我可以在HTML中看到的那个？ value设置为number：第一次选择最后一个选项。

这是我的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

Answer 1

似乎这是Angularjs 1.26中引入的错误。这里有一个bug报告：https://github.com/angular/angular.js/issues/10161

我没有找到解决方法，所以在我的情况下，我只需要等待Angular团队发布修复此问题的新版本。

Angularjs无法在下拉列表中第一次选择最后一项

1 个答案: