AngularJS变化焦点 [英] AngularJS change focus

问题描述

我有我的网页上四个输入型编号字段。
我想重点改为每当有一个数字（最大数量）一直使用AngularJS进入下一个最接近输入。

I have four input type number fields on my page. I would like to change the focus to the closest next input whenever a single digit (max number) has been entered using AngularJS.

我是新来的，但我有我的控制器挂接到视图。

I'm new to this but I've got my controller hooked to the view.

<input type="number" ng-model="digit_one" ng-change="digitChange()" ng-maxlength="1" maxlength="1" />
...
digit_two, three and four.

编辑：

而每当用户点击退格，我想重点回去到最近的输入。

And whenever the user hits "backspace" I'd like the focus to go back to the closest input.

 <ul ng-show="codeInput" class="col">
                <li class="four">
                    <input custom type="number" ng-model="digit_one" ng-maxlength="1" ng-minlength="1" maxlength="1" select-on-click />
                </li>
                <li class="four">
                    <input custom type="number" ng-model="digit_two" ng-maxlength="1" ng-minlength="1" maxlength="1" select-on-click />
                </li>
                <li class="four">
                    <input custom type="number" ng-model="digit_three" ng-maxlength="1" ng-minlength="1" maxlength="1" select-on-click />
                </li>
                <li class="four">
                    <input custom type="number" ng-model="digit_four" ng-maxlength="1" ng-minlength="1" maxlength="1" select-on-click />
                </li>

app.directive('custom', ['$parse', function($parse) {
    return {
        restrict: 'A',
        require: ['ngModel'],
        link: function (scope, element, attrs, ctrls) {
            var model = ctrls[0], form = ctrls[1];

            scope.next = function () {
                return model.$valid
            }

            scope.$watch(scope.next, function (newValue, oldValue) {
                if (newValue && model.$dirty) {
                    var nextinput = element.next('input');
                    if (nextinput.length === 1) {
                        nextinput[0].focus();
                    }
                }
            })
        }
    }
}]);

帮助是AP preciated。

Help is appreciated.

感谢

推荐答案

您可以做到这一点创建自定义指令。（这仅覆盖部分向前）

You can do it creating a custom directive.(this is only covered forward part)

<div ng-app="app">
    <form>
        <input ng-model="test1" type="text" custom ng-minlength="3" /> 
        <input ng-model="test2" type="text" custom ng-minlength="3" /> 
        <input ng-model="test3" type="text" custom ng-minlength="3" />
    </form>
</div>


angular.module('app', [])
.directive('custom', ['$parse', function($parse) {
    return {
        restrict: 'A',
        require: ['ngModel'],
        link: function(scope, element, attrs, ctrls) {
            var model=ctrls[0], form=ctrls[1];

            scope.next = function(){
                return model.$valid
            }

            scope.$watch(scope.next, function(newValue, oldValue){
                if (newValue && model.$dirty)
                {
                    var nextinput = element.next('input');
                    if (nextinput.length === 1)
                    {
                        nextinput[0].focus();
                    }
                }
            })
        }
    }
}])

演示 的

这篇关于AngularJS变化焦点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！