HTML5: Wie setzen Sie den Fokus auf ein Texteingabefeld eine Liste mit AngularJS

Ich benutze AngularJS mit der ng-repeat-Direktive, um zu zeigen, ein array von Objekten als Liste.

<li ng-repeat="cue in cues" class="form-inline">
    <input type="text" ng-model="cues[$index].text" class="input-xlarge"/>
    {{cue.isNewest}}
</li>

Die Eigenschaft "isNewest" wahr ist nur auf ein element des Arrays. Ich würde gerne die Tastatur-Fokus auf das text-Eingabe, Punkt. Wie kann ich das machen mit AngularJS?

InformationsquelleAutor Marcel | 2013-01-07

  1. 24

    Hier ist eine weitere Umsetzung der Richtlinie, die verwendet attrs.$beachten Sie:

    myApp.directive('focus', function () {
  return function (scope, element, attrs) {
    attrs.$observe('focus', function (newValue) {
      newValue === 'true' && element[0].focus();
      //or, if you don't like side effects (see @Christophe's comment):
      //if(newValue === 'true')  element[0].focus();
    });
  }
});

    Beachten Sie, dass ein interpoliertes DOM-Attribut mit dem Wert (d.h., {{cue.isNewest}}) immer ausgewertet, in einen string, und damit den Grund newvalue ist im Vergleich zu den string 'true' eher als Schlagwort true.

    HTML:

    <input type="text" ng-model="cues[$index].text" focus="{{cue.isNewest}}"
 class="input-xlarge" />{{cue.isNewest}}

    Diese fiddle hat auch eine Methode zum Umschalten, welches Element im array sollte den Fokus haben.

    Beachten Sie, dass wenn Sie nicht laden, jQuery, brauchen wir element[0].focus() in die link-Funktion (nicht element.focus()) weil jqLite nicht über einen Fokus () - Methode.

    +1 danke, das ist hilfreich!
    Akzeptiert über asgoth Antwort, weil es funktionierte beim ersten mal versucht und ist auch expalined.
    Expected an assignment or function call and instead saw an expression: Ich muss sagen, ich habe nicht eine Nebenwirkung in einem Ausdruck für Jahre, außer in einige one-liner Wettbewerbe, es sollte " if (cond) {hier stehen die}'.

    InformationsquelleAutor Mark Rajcok

  2. 4

    Da würde dich manipulieren des DOM, erstellen Sie eine Richtlinie. So etwas wie:

    var app = angular.module('quirli', []);
app.directive('focusable', function() {
    return {
        restrict: 'A',
        scope: {
            focusable: '@'
        },
        link: function(scope, elm, attrs) {
            scope.$watch('focusable', function (value) {
                if (value) {
                    elm[0].focus();
                }
            });
        }
    };
});

    Html:

    <html ng-app="quirli" lang="en">
....  
<input type="text" ng-model="cues[$index].text" class="input-xlarge" focusable="{{cue.isNewest}}"/>

    Hinweis: ungetestet.

    Tanks asgoth für dieses Stück code. Ich habe etwas geändert, Hinzugefügt Sie einen app-Namen, wie hier gezeigt: docs.angularjs.org/guide/directive Die Fokussierung Zeug funktioniert nun, das problem ist jetzt, dass der text in den Textboxen wird weggelassen. Ich habe, um herauszufinden, was die Ursache ist.
    Ich bin jetzt das Lesen durch die erwähnte Richtlinie Dokument. Wendungen auf, mein Geist!
    Verwenden elm[0].focus() wenn jQuery ist nicht geladen (auch wenn es geladen ist, könnte es besser sein, verwenden Sie diese syntax, wie sollte es auch immer funktioniert).
    OK funktioniert ...es sei denn, Sie verwenden auch ng-focus / ng-blur. Dann werden Sie ausführen in "$digest "bereits im Gange" Gebiet.

    InformationsquelleAutor asgoth

  3. 1

    Es ist kein besonderes feature von AngularJS, die den Fokus erhält. Sie lösen könnte dies mit einem $ - Uhr in Ihrem controller, sondern auch mit einer Richtlinie.

    Ich habe mir in $watch von hier: docs.angularjs.org/api/ng.$rootScope.Umfang Jedoch komme ich zu dem Schluss, dass ich nur zusehen, änderungen des Modells. Aber mein controller wäre nicht in der Lage das DOM manipulieren, noch ist das gute design, AFAIK.
    Der controller in der Lage sein würde, das dom zu verändern, aber es ist nicht gutes design. So eine Richtlinie ist es für Sie 🙂

    InformationsquelleAutor iwein

  4. 1

    Den anderen vorgeschlagenen Antworten Arbeit OK 9/10 mal für mich, aber schon bald lief ich im "$digest "bereits in Arbeit" Spaß.

    Habe ich eine leicht modifizierte version des vorherigen Antworten von asgoth und Mark Rajcok. Im Grunde fügen Sie die $timeout Abhängigkeit und legen Sie die focus () - Aufruf innerhalb eines Zeitlimits(...). IIRC ng-focus macht das gleiche.

    var app = angular.module('cgeers', []);
app.directive('focus', ["$timeout", function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            scope.$watch(attrs.focus, function (value) {
                if (value) {
                    $timeout(function() { element[0].focus(); });
                }
            });
        }
    };
}]);

    InformationsquelleAutor Christophe Geers

Schreibe einen Kommentar