输入字段在嵌套的 AngularJS 重复中失去焦点

Input field losing focus in nested AngularJS repeat

本文关键字：失去 焦点 AngularJS 字段 嵌套 输入      更新时间：2023-09-26

我对嵌套的角度列表有一些奇怪的行为。在我键入的第一个字母后，焦点立即丢失。

外部重复是属性列表，由属性名称（不是索引）标识。内部重复是属性的子数组，由索引标识。

显示和装订按预期工作，但是当我更改某些内容（例如插入字母）时，焦点丢失，我无法键入另一个字母或任何东西。我必须再次单击该字段。

<div data-ng-repeat="(key, value) in configuration.metaData">
    <label>{{key}}</label>
    <input data-ng-repeat="subKey in configuration[key]"
           data-ng-model="configuration[key][$index]"
           type="text"
           name="{{subKey}}">
</div>

一些可能有用的其他信息：

  • 此代码段通过 ng-include 包含在表单中
  • 我在文本区域上得到相同的行为
  • 元数据包含有关对象属性（也是数据类型等）的数据，但实际值在配置本身中

这个问题可以通过在所有ng重复中使用"按$index跟踪"来避免。

原因是如果内容发生变化，angularjs 仍然会知道它是同一个对象，因为 Angular 通过项目（键、值）在数组中的位置跟踪它们。

当（键，值）发生变化时，没有$index跟踪，随着"值"的变化，它被视为一个新对象，这引入了焦点松散（元素被破坏然后由angularjs重新创建）。

<input data-ng-repeat="subKey in configuration[key]"
       data-ng-model="configuration[key][$index]"

这是非常奇怪的，可能是错误的。 即通过键入 smth，您可以更改配置[键][0]，从而更改第一个子键...

我猜你的意思是这样的：

<input data-ng-repeat="subKey in configuration[key]"
       data-ng-model="subKey.value"
       type="text"
       name="{{subKey.name}}">

带模型

  $scope.configuration = {
    metaData : {
      test : 'test'
    },
    test : [{ name : 'a', value : 'aa'}, { name : 'b', value : 'bb'}]
  }

http://plnkr.co/edit/IwDS3141BWcv9t5BcAka?p=preview

相关文章：