Autofokus in ng-Repeat in AngularJS

Question

I verwendet ng-repeat mehrere Telefonnummern

<div ng-repeat="phone in phones"> 
    <input ng-model="phone" type="text" autofocus="autofocus"> 
</div> 
<a ng-click="addPhone()">Add Phone</a> 

In Controller

$scope.addPhone = function() { 
    $scope.phones.add(''); 
} 

Immer, wenn ich neues Telefon hinzuzufügen, wird es automatisch Autofokus um die Eingabe zu erhalten. Es funktioniert großartig. Aber wenn ich die Ansicht neu lade (von Link öffnen), scrollt es zum letzten Eintrag. Wie vermeide ich den Autofokus beim erstmaligen Laden der Ansicht? Nur ich möchte Autofokus, wenn ich neues Telefon hinzufüge.

Answer 1

Versuchen:

<div ng-repeat="phone in phones"> 
    <input ng-model="phone" type="text" ng-if="$index == focusIndex" autofocus> 
    <input ng-model="phone" type="text" ng-if="$index != focusIndex"> 
    </div> 
    <a ng-click="addPhone()">Add Phone</a> 

JS:

$scope.addPhone = function() { 
    $scope.phones.push('Phone' + Math.random()); 

    $scope.focusIndex = $scope.phones.length-1; 
    } 

DEMO

Lösung mit benutzerdefinierten Attribut:

<div ng-repeat="phone in phones"> 
    <input ng-model="phone" type="text" custom-autofocus="$index == focusIndex" > 
    </div> 
    <a ng-click="addPhone()">Add Phone</a> 

JS:

.directive('customAutofocus', function() { 
    return{ 
     restrict: 'A', 

     link: function(scope, element, attrs){ 
      scope.$watch(function(){ 
      return scope.$eval(attrs.customAutofocus); 
      },function (newValue){ 
       if (newValue === true){ 
        element[0].focus();//use focus function instead of autofocus attribute to avoid cross browser problem. And autofocus should only be used to mark an element to be focused when page loads. 
       } 
      }); 
     } 
    }; 
}) 

DEMO

Answer 2

Was passiert ist, wenn Sie eine Liste von Eingaben haben, die den Fokus erfordert, wenn die Seite gleichzeitig geladen wird. Da die letzte Eingabe zuletzt gerendert wird, erhält sie immer den Autofokus.

Die Lösung wäre, das Attribut autofocus bei Bedarf anzuwenden.

<div ng-repeat="phone in phones"> 
    <input ng-model="phone" type="text" autofocus="{{phone.autofocus || 'false'}}"> 
</div> 
<a ng-click="addPhone()">Add Phone</a> 

Controller:

$scope.addPhone = function() { 
    $scope.phones[$scope.phones.length-1].autofocus = 'false'; // unfocus the old 
    $scope.phones.add(''); 
    $scope.phones[$scope.phones.length-1].autofocus = 'true'; // focus the new 
} 

Answer 3

Autofokus mehrfach auf Ihrer Seite zu haben ist nicht verboten, aber sieht nicht richtig auf der Grundlage der documentationm, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input

Es heißt Only one form element in a document can have the autofocus attribute

Autofokus HTML5 Dieses Boolesche Attribut, das Sie, dass ein Steuerformular angeben können sollte in einer anderen Steuerung, indem Sie den Eingabefokus, wenn die Seite geladen wird, es sei denn, der Benutzer überschreibt es, zum Beispiel. Nur ein Formularelement in einem Dokument kann das Autofokus-Attribut haben, das ein Boolescher Wert ist. Es kann nicht angewendet werden, wenn das Attribut type auf Versteckt festgelegt ist (dh Sie können den Fokus nicht automatisch auf ein ausgeblendetes Steuerelement setzen).

Ich würde nicht autofocus innerhalb ng-repeat verwenden und den Fokus manuell ein, nachdem es hinzugefügt wird.

Answer 4

können Sie diese Anweisung verwenden: https://github.com/aikus/ng-focus-if/blob/master/ng-focus-if.js Zum Beispiel:

<div ng-repeat="phone in phones"> 
    <input ng-model="phone" type="text" ng-focus-if="1==1"> 
</div> 
<a ng-click="addPhone()">Add Phone</a>