时间戳

首页 > 解决方案 > 输入 1 个字符后输入框失去焦点

html - 输入 1 个字符后输入框失去焦点

问题描述

在输入字段中键入每个字符后，我似乎无法写下一个完整的单词而不会集中注意力。试图理解为什么会这样。

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/

标签： htmlangularjs

解决方案

我能够通过进行以下更改来修复您的代码：

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

推荐阅读