Auto focus en ng-repeat dans angularjs

J'utilise ng-repeat pour obtenir plusieurs numéros de téléphone

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

Dans les contrôleurs

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

Chaque fois que j'ajoute un nouveau téléphone, il est automatiquement autofocus de l'entrée. Il fonctionne très bien. Mais quand je reload(ouvert à partir du lien) le point de vue, il passe à la dernière entrée. Comment puis-je éviter de l'autofocus à la première fois, le point de vue des charges. Seulement je veux autofocus, quand j'ajoute un nouveau téléphone.

OriginalL'auteur Fizer Khan | 2014-01-25

  1. 19

    Essayer:

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

    DÉMO

    Solution à l'aide de l'attribut personnalisé:

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

    DÉMO

    Solution sympa. La meilleure pratique est de ne pas le préfixe des directives sur mesure avec ng en cas de heurts avec les futurs angulaire de presse.
    Bunny: c'est vraiment un bon point. Merci
    Je viens de tester cette solution (DÉMO plunker lien avec Chrome v52: je n'ai pas l'accent sur la dernière ENTRÉE ... cette solution Pourrait être obsolète?
    vous obtenez concentrer uniquement lorsque vous ajoutez un nouveau téléphone. Si vous voulez avoir le focus sur le chargement de la page, vous devez définir la valeur par défaut de l'indice de focusIndex: plnkr.co/modifier/lN5W94oDeiqR6HMUFMqz?p=preview
    Au lieu d'utiliser la condition personnalisé-autofocus="$index == focusIndex" il suffit d'utiliser la coutume-autofocus="$last"

    OriginalL'auteur Khanh TO

  2. 3

    Vous pouvez utiliser cette directive:
    https://github.com/aikus/ng-focus-if/blob/master/ng-focus-if.js
    Par exemple:

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

    OriginalL'auteur Nikita

  3. 1

    Ce qui se passe est que vous avez une liste d'entrées qui est exigeant la mise au point lorsque la page se charge en même temps. Depuis la dernière entrée rend dernier, elle obtient toujours la mise au point automatique.

    La solution serait d'appliquer le autofocus attribut en cas de besoin.

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

    Contrôleur:

    $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
}
    C'est toujours au centre de l'élément, même si l'expression a la valeur "false". À L'Aide De Chrome.
    Cela ne fonctionne pas avec Chrome
    Attributs booléens en HTML ne sont que de fausses quand elles n'existent pas. stackoverflow.com/a/25449778/41908

    OriginalL'auteur ncabral

  4. 0

    Avoir l'autofocus plusieurs fois dans votre page n'est pas interdit, mais ne regarde pas d'un droit fondé sur la documentationm, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input

    Il ditOnly one form element in a document can have the autofocus attribute

    autofocus HTML5 Cet attribut Booléen permet de spécifier qu'un formulaire
    le contrôle doit avoir le focus d'entrée lorsque la page se charge, à moins que l'utilisateur
    remplace, par exemple en tapant dans un autre contrôle. Un seul
    élément de formulaire dans un document peut avoir l'attribut autofocus, qui est
    une valeur Booléenne. Elle ne peut être appliquée que si le type de définir l'attribut caché
    (qui est, vous ne pouvez pas définir automatiquement le focus à un contrôle caché).

    Je ne voudrais pas utiliser autofocus dans ng-repeat et régler manuellement la mise au point après est ajoutée.

    OriginalL'auteur allenhwkim