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>

我試圖做的是這樣，當您輸入字母時，它會轉到下一個輸入框。 我添加了“ focus”指令，並像這樣創建了它：

 .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結構似乎不是下一個span另一個input 。 您需要先向上移動到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');
    });
    }
  }
})