Wie setze ich den Fokus auf das nächste Eingabefeld, das durch ng-repeat erzeugt wird?

Question

Ich habe eine iOS App mit angularJS und ionic. Ich versuche, den Tastaturfokus auf das nächste Eingabefeld zu bringen, wenn der 'Return'-Knopf gedrückt wird. Hier ist der HTML-Code, in dem die ng-repeat existiert:

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

Sie in meinem Eingangselement sehen kann ich "on-return =" nextline ($ index) "". Es bin ich mit meiner benutzerdefinierten Richtlinie, die verwendet wird, wenn die Return-Taste getroffen wird:

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

Welche meine Funktion in nextline meinen Controller rufe:

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

Wo Index den aktuellen Eingabefeld Index ist. Ich brauche einen Weg, um das nächste HTML-Eingabeelement zu erhalten und den Fokus dort zu setzen. Jede Hilfe wird geschätzt.

Answer 1

Meiner Erfahrung nach ist eine eher ereignisgesteuerte Methode besser für die Fokusverwaltung geeignet. Übergeben Sie das Ereignis an Ihre nextLine-Methode. Angenommen, Sie verwenden nur jQuery Licht würden Sie etwas am Ende wie folgt:

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

Zunächst einmal ist es nicht möglich, mehrere Instanzen von Richtlinien mit DOM Event-Listener empfohlen zu verwenden. Was wäre, wenn 1000 Direktiven dasselbe "Keydown" -Ereignis hören würden? das wäre verrückt.

Vielleicht sollten Sie dies mit guten 'ol Jquery nähern: fügen Sie einen "keydown" Event-Listener zu einem Container-Element, und dann einfach über die Eingabefelder mit jedem "Return" gedrückt. : Working demo here

Eine vereinfachte Version der Vorlage:

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

Und dann in der Richtlinie:

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

Lösung # 2:

Ein anderer Ansatz wäre ng-focus, der einen booleschen Ausdruck akzeptiert. Sie könnten eine ng-click-Funktion für jedes Element in Ihrem ng-repeat erstellen, das es als "ausgewählt" setzt und den Rest deaktiviert. . Dann item.selected in Ihre Eingabefelder auswerten zu erreichen Fokus:

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