AngularJS和Ionic移动到下一个输入

Question

我正在进行一个问答游戏，我正在使用NG重复根据答案生成方框（见截图）

这是生成11个框的html：

  <form>
<span ng-repeat="content in answerArr track by $index"><span style="margin-right:10px;"></span><!--this adds space -->

<span class="single-input" ng-repeat="contentt in content track by $index">
          <span ng-if="$index < content.length">
              <span class="box" style="display:inline-block;">
                    <input type="text" class="yo" focus maxlength="1">
               </span>
           </span>

</span>
</span>
</form>

我试图制作是这样当你输入一个字母时，它会转到下一个输入框。我添加了＆＃34;焦点＆＃34;指令并像这样创建：

 .directive('focus', function() {
  return {
    restrict: 'A',
    link: function($scope,elem,attrs) {

     elem.bind('keydown', function (e) {
        console.log("test");
        var nextElement = elem.closest('.single-input').next();
        if(nextElement.length) nextElement.find('input').focus();
    });
    }
  }
})

根本不做任何事情，不确定问题是什么 - 有人可以帮忙吗？

由于

Answer 1

正如我可以看到您的HTML结构一样，下一个input似乎不是另一个span。您需要先向上移动到ng-repeat元素，然后再次搜索输入以触发焦点。这样只有你才能做到这一点。

为此，我建议您添加一些课程ng-repeat span，如single-number

<强>标记

<span class="single-input" ng-repeat="contentt in content track by $index">

<强>指令

.directive('focus', function() {
  return {
    restrict: 'A',
    link: function($scope,elem,attrs) {

     elem.bind('keydown', function (e) {
        var nextElement = elem.closest('.single-input').next();
        if(nextElement.length) nextElement.find('input'). trigger('focus');
    });
    }
  }
})