Поле ввода не сфокусировано после ввода 1 символа

Question

Кажется, я не могу написать полное слово, не будучи сфокусированным после каждого символа, который я печатаю в поле ввода.Пытаясь понять, почему это так.

AngularJS

var module = angular.module("myModule", []);
module.controller("myController", function($scope) {
  $scope.prop = {};
});

HTML

<div ng-app="myModule">
 <div ng-controller="myController">

    <button ng-show="!prop.dropdownType"
            ng-click="prop.dropdownType = ['']">Init</button>

    <div ng-hide="!prop.dropdownType" ng-repeat="(key, value) in prop.dropdownType">
       <input type="text" ng-model="prop.dropdownType[key]">
    </div>

    <button ng-hide="!prop.dropdownType"
            ng-click="prop.dropdownType.push('')" >Add options</button>

 </div>
</div>

РЕДАКТИРОВАТЬ: создал быстрый код, где вы можете увидеть, что я имею в виду.Просто запустите код, инициализируйте поле ввода и попробуйте ввести слово: https://jsfiddle.net/wk173q0a/

Answer 1

Мне удалось исправить ваш код, внеся следующие изменения:

<div ng-hide="!prop.dropdownType">
   <input ng-repeat="type in prop.dropdownType track by $index" type="text" ng-model="type">
</div>

Проблема в том, что вы обновляете ключ для значений, по которым вы выполняете итерацию.Это запускает цикл дайджеста, и вы теряете фокус.Кроме того, кнопка добавления не работала, потому что вы добавляли идентичные объекты без отслеживания.

Наконец, вы захотите перебрать массив объектов, чтобы иметь возможность поддерживать ссылку в ng-модели.В противном случае все изменения будут потеряны после добавления нового значения в ваш массив.

Это отличная статья о понимании цикла дайджеста: https://www.thinkful.com/projects/understanding-the-digest-cycle-528/

Answer 2

Это происходит из-за ng-repeat в теге.Итак, в этом случае попробуйте ниже 2 метода, чтобы решить проблему фокусировки элемента ввода.

1) Использовать дорожку по $ index

<div ng-hide="!prop.dropdownType" ng-repeat="(key, value) in prop.dropdownType track by $index">
   <input type="text" ng-model="prop.dropdownType[$index]">
</div>

2) Обернуть строки в объекты.Например, prop.dropdownType = [{value: 'string1'}, {value: 'string2'}, ...]:

<div ng-hide="!prop.dropdownType" ng-repeat="(key, value) in prop.dropdownType">
   <input type="text" ng-model="prop.dropdownType[$index].value">
</div>

Answer 3

Это происходит потому, что вы обновляете список / объект, управляющий вашим ng-repeat.

prop.dropdownType может начинаться как [''], но как только вы вводите данные, вы обновляетеprop.dropdownType объект.AngularJS видит, что вы изменили prop.dropdownType, и обновляет dom с новым вводом.Если вы набрали символ A, prop.dropdownType теперь будет иметь ключ A (и значение null?), А вводимый вами теперь текст - другой объект.

Если вы изменитеесли ng-model будет отдельным массивом или каким-либо другим свойством, эта проблема должна исчезнуть.