ng-repeatで生成された次の入力フィールドにフォーカスを設定するにはどうすればいいですか？

Question

私はangularJSとionicを使ったiOSアプリを持っています。私は、 'Return'ボタンが押されたときに次の入力フィールドにキーボードのフォーカスを合わせようとしています。

  <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> 

あなたが "オンリターン=" nextLine（$インデックス） "" 私は私のinput要素で見ることができます：ここではNG-repeatが存在するHTMLコードです。そこで私は、戻るボタンがヒットされたときに使用されている私のカスタムディレクティブを使用しています：

私のコントローラで私のnextLine関数を呼び出す

.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(); 
     } 
    }); 
}; 
}); 

：

インデックスが現在の入力ボックスのインデックスである

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

。次のHTML入力要素を取得してそこにフォーカスを設定する方法が必要です。どんな助けもありがとうございます。

Answer 1

私の経験では、より多くのイベント駆動型の方法がフォーカス管理に適しています。イベントをnextLineメソッドに渡します。あなただけがこのようなものに終わるだろうjQueryの光を使用していると仮定すると：すべての

//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のイベントリスナーとディレクティブの複数のインスタンスを使用することをお勧めしません。同じ "keydown"イベントを聴いている1000のディレクティブがあればどうでしょうか？それはナッツだろう。

おそらく、あなたは良い「ol Jquery」でこれにアプローチするべきでしょう： "keydown"イベントリスナーをコンテナ要素に追加し、各 "return"を押したまま入力フィールドを反復するだけです。 ：Working demo here

テンプレートの簡易版：あなたの指令で

<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：

もう1つの方法は、ブール式を受け入れるng-focusを使用することです。あなたはng-repeatの中のすべてのアイテムに対してng-click機能を作成し、それを「選択済み」に設定し、残りの選択を解除することができます。その後、フォーカスを達成するために、あなたの入力フィールドでitem.selectedを評価：

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