Автофокус в ng-repeat в angularjs

Я использую ng-repeat для получения нескольких телефонных номеров

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

В контроллерах

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

Всякий раз, когда я добавляю новый телефон, он автоматически автофокусирует вход. Он отлично работает. Но когда я перезагружаю (открываю из ссылки) вид, он прокручивается до последней записи. Как я могу избежать автофокусировки при первом запуске просмотра. Только я хочу автофокусироваться при добавлении нового телефона.

Ответ 1

Try:

<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

Решение с использованием настраиваемого атрибута:

<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

Ответ 2

Вы можете использовать эту директиву: https://github.com/aikus/ng-focus-if/blob/master/ng-focus-if.js Например:

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

Ответ 3

Что происходит, у вас есть список входов, требующих фокуса, когда страница загружается одновременно. Поскольку последний вход отображается последним, он всегда получает автофокус.

Решение было бы применить атрибут autofocus, когда это необходимо.

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

Контроллер:

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

Ответ 4

Наличие автофокуса несколько раз на вашей странице не запрещено, но выглядит неправильно на основе документацииm, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input

В нем говорится Only one form element in a document can have the autofocus attribute

autofocus HTML5 Этот атрибут Boolean позволяет указать, что форма управление должно иметь фокус ввода при загрузке страницы, если только пользователь переопределяет его, например, путем ввода другого элемента управления. Единственный элемент формы в документе может иметь атрибут автофокусировки, который булево. Он не может применяться, если атрибут type установлен в скрытое (то есть вы не можете автоматически установить фокус на скрытый элемент управления).

Я не хотел бы использовать autofocus внутри ng-repeat и устанавливать фокус вручную после его добавления.