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-model中的引用。否则，一旦将新值添加到数组中，所有更改将丢失。

这是了解摘要周期的绝佳读物： https://www.thinkful.com/projects/understanding-the-digest-cycle-528/

Answer 2

之所以会这样，是因为您正在更新控制ng-repeat的列表/对象。

prop.dropdownType可能以['']开头，但是一旦您输入内容，就将更新prop.dropdownType对象。 AngularJS看到您已经更改了prop.dropdownType，并使用新输入刷新了dom。如果您键入字符A，则prop.dropdownType现在将具有A键（并且值为null？），并且您看到的输入现在是一个不同的对象。

如果将ng-model更改为单独的数组或其他属性，则此问题将消失。

Answer 3

这是由于标签中的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>

键入1个字符后输入字段失去焦点

3 个答案: