如何将焦点设置在ng-repeat生成的下一个输入字段上？

Question

我有一个使用angularJS和ionic的iOS应用。 我试图在按下“返回”按钮时将键盘焦点移至下一个输入字段。 这是ng-repeat存在的HTML代码：

            <div class="row item-list" ng-repeat="item in shoppingList">
                <div class="col col-10 col-check" ng-click="checkItem($index)">
                    <i class="icon ion-checkmark-round" ng-if="item.Action == 'check'"></i>
                </div>
                <div class="col col-memo" ng-click="updateMemo($index)">
                    <label class="item-list item-input">
                        <input id="inputText" type="text" placeholder="" ng-model="item.EventContent" on-return="nextLine($index)"/>
                    </label>
                </div>
            </div>

您可以在我的输入元素中看到“ on-return =“ nextLine（$ index）””。 我正在使用我的自定义指令，该指令在按下返回按钮时使用：

.directive('onReturn', function () {
return function (scope, element, attrs) {
    element.bind("keydown keypress", function (event) {
        if (event.which === 13) {
            scope.$apply(function () {
                scope.$eval(attrs.onReturn);
            });
            event.preventDefault();
        }
    });
};
});

哪个在我的控制器中调用nextLine函数：

myScope.nextLine = function (index) {
    //get next html input element and .setFocus()
}

其中index是当前输入框的索引。 我需要一种获取下一个HTML输入元素并在那里设置焦点的方法。 任何帮助表示赞赏。

Answer 1

以我的经验，事件驱动更多的方法更适合于焦点管理。 将事件传递给nextLine方法。 假设您仅使用jQuery light，您将得到如下所示的结果：

//add closest method to jQuery light
$.fn.closest = function (selector) {
  var el = this[0];
  while (el && self.matches(el, selector)) {
    el = el.parentElement;
  }
  return $(el);
};

myScope.nextLine = function (event) {
  var nextInput = $(event.target).closest("[ng-repeat]").find("input");
  if(nextInput[0]){
    nextInput[0].focus();
  }
}

Answer 2

首先，不建议在DOM事件侦听器中使用多个指令实例。 如果您有1000个指令监听相同的“ keydown”事件怎么办？ 那就疯了。

也许您应该使用良好的'ol Jquery来解决此问题：向容器元素添加“ keydown”事件侦听器，然后在每次按下“返回”键时在输入字段上进行迭代。 ： 在这里工作演示

模板的简化版本：

<div class="items-lists" on-return>
    <input type="text" ng-repeat="item in shoppingList" class="item-list">
</div>

然后在您的指令中：

angular.module('MyApp')
    .directive('onReturn', function() {
        return {
            restrict: 'A',
            link: function(scope, element, attr) {
                $(element).on("keydown keypress", function(event) {
                    if (event.which === 13) {
                        scope.nextLine();
                        event.preventDefault();
                    }
                });

                //get next html input element and set focus()
                scope.nextLine = function() {
                    var nextInput =  $(element).find('input:focus').next('input');
                    var firstInput = $(element).find('input')[0];
                    nextInput.length ? nextInput.focus() : firstInput.focus();
                }
            }
        }
    });

解决方案2：

另一种方法是使用接受布尔表达式的ng-focus 。 您可以为ng-repeat每个项目创建ng-click函数，将其设置为“ selected”，然后取消选择其余项。 然后评估item.selected在输入字段中选择的item.selected以获得焦点：

<div class="items-lists">
    <input ng-repeat="item in shoppingList" ng-focus="item.selected" ng-click="selectItem(item)" class="item-list">
</div>