2016-09-14 6 views
0

Ich habe ein Formular in meiner Angular App, wo Benutzer mehrere Felder derselben Feldwerte mit einer Schaltfläche hinzufügen können.TabIndex der Eingabe dynamisch festlegen

<md-content layout-padding=""> 
    <div> 
     <form name="userForm"> 
     <div layout="row" ng-repeat="person in persons"> 
      <md-input-container flex> 
      <label>First name</label> 
      <input ng-model="person.firstName"> 
      </md-input-container> 

      <md-input-container flex> 
      <label>Last Name</label> 
      <input ng-model="person.lastName"> 
      </md-input-container> 
     </div> 
     <md-button class="md-raised" ng-click="addAnother()">Add Another</md-button> 
     </form> 
    </div> 
    </md-content> 

Arbeiten Codepen

So schon ein paar Eingänge sind bevölkert, fügt die Schaltfläche ein neues Objekt, um einen neuen Satz von Eingängen zu erscheinen.

Was ich möchte, ist für die erste Eingabe in der neu hinzugefügten Zeile, um den Fokus zu erhalten, so dass der Benutzer beginnen kann, sofort einzutreten.

Gibt es eine Möglichkeit, den tabIndex programmatisch zu setzen?

+0

Bitte setzen Sie den Code in der Frage selbst, anstatt Website Verknüpfung aus. – evolutionxbox

+0

'element.setAttribute ('tabindex', 0)' – evolutionxbox

Antwort

0

Überprüfen Sie dies. Die große Antwort auf Ihre Frage finden Sie hier: Input autofocus attribute

angular.module('ng').directive('ngFocus', function($timeout) { 
 
    return { 
 
     link: function (scope, element, attrs) { 
 
      scope.$watch(attrs.ngFocus, function (val) { 
 
       if (angular.isDefined(val) && val) { 
 
        $timeout(function() { element[0].focus(); }); 
 
       } 
 
      }, true); 
 

 
      element.bind('blur', function() { 
 
       if (angular.isDefined(attrs.ngFocusLost)) { 
 
        scope.$apply(attrs.ngFocusLost); 
 

 
       } 
 
      }); 
 
     } 
 
    }; 
 
});

<input type="text" ng-focus="isFocused" ng-focus-lost="loseFocus()"> 
0

Ich habe bemerkt, dass Sie die Verwendung einer Klasse md-input-focused

Methode 1 (die Namen machen am besten) Dies ist die einfachste & eleg ant Lösung für Ihr Problem. Verwendung von $last in eckigen. Fügen Sie eine Klasse Zustand auf <md-input-container> First nameCodepen wie so:

<md-input-container flex ng-class="{'md-input-focused': $last}"> 
    <label>First name</label> 
    <input ng-model="person.firstName"> 
</md-input-container> 

Dieses Verfahren erfordert keine zusätzliche Javascript Änderungen, sondern nur hinzufügen, um den Fokus & nicht den Eingang aktiv machen. Siehe unten, wenn Sie den Eingang aktiv machen wollen.

Methode 2 Überprüfen Sie die codepen. Dies ist das gleiche, aber die JavaScript-Methode zum dynamischen Hinzufügen der gleichen Klasse

FYI: JQuery benötigt für die folgende Aussage. Ich hoffe du hast das.

Dies ist Ihre magische Aussage. Codepen

$('.layout-row:last-of-type').children().first().find('input').focus(); 

Fügen Sie diese auf Ihre $scope.addAnother Funktion in einem Timeout (sehr wichtig).

Ihre ganze Funktion sollte folgendermaßen aussehen

$scope.addAnother = function() { 
    $scope.persons.push({}); 
    setTimeout(function(){ 
     $('.layout-row:last-of-type').children().first().find('input').focus(); 
    }, 500); 
    } 

Sie auch die Verwendung des Winkel $timeout anstelle des Fensters setTimeout

+0

Dies ist nicht das, wonach ich bin, stattdessen möchte ich, dass der Eingang den Fokus erhält. Die von Ihnen angebotene Lösung bedeutet immer noch, dass der Benutzer auf die Eingabe klicken muss. – mindparse

+0

Das ist sogar noch einfacher, alles, was Sie tun müssen, ist in "Methode2" die "md-input-focused" Zeilen durch '$ ('. Layout-row: last-of-type') zu ersetzen. Children(). First () .find ('input') .focus(); '. Antwort & [Geige] (http://codepen.io/PleaseBugMeNot/pen/EgKaGX) aktualisiert –

0

Hier gehen Sie machen könnte - CodePen

Markup

<input ng-model="person.firstName" auto-focus="true"> 

Richtlinie

// Inspired by Mark Rajcok's answer - http://stackoverflow.com/a/14837021/782358 
.directive('autoFocus', function($timeout) { 
    return { 
     scope: { trigger: '@autoFocus' }, 
     link: function(scope, element) { 
      scope.$watch('trigger', function(value) { 
       if (value.toString() === "true") { 
        $timeout(function() { 
         element[0].focus(); 
        }); 
       } 
      }); 
     } 
    }; 
}); 
Verwandte Themen