绑定输入在 angularjs 中变得不集中

本文介绍了绑定输入在 angularjs 中变得不集中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

我正在使用 angularjs 运行这个简单的代码:

HTML:

<code>{{ itemsInArray }}</code><div ng-repeat="itemsInArray 中的项目"><input ng-model="itemsInArray[$index]"/>

JavaScript:

function AController($scope) {$scope.itemsInArray = ["strA", "strB", "strC"];}

在对数组进行索引时绑定似乎工作正常，但在输入一个字符后，输入失去焦点.
您可以在此小提琴上找到工作代码:http://jsfiddle/QygW8/

解决方案

我认为这是因为您正在操作在 ng-repeat 上迭代的同一个项目.所以 ng-repeat 看到项目的变化并重新运行`ng-repeat 来重新生成项目.

如果您查看小提琴 html，您可能会注意到这种效果.

为了让它工作，你可以这样做

http://jsfiddle/cmyworld/CvLBS/

将数组更改为对象数组的位置

$scope.itemsInArray = [{data:"strA"}, {data:"strB"}, {data:"strC"}];

然后绑定到item.data

I am running this simple code with angularjs :

HTML :

<div ng-app ng-controller="AController">
    <code>{{ itemsInArray }}</code>
    <div ng-repeat="item in itemsInArray">
        <input ng-model="itemsInArray[$index]" />
    </div>
</div>

JavaScript :

function AController($scope) {
    $scope.itemsInArray = ["strA", "strB", "strC"];
}

Binding appears to be working correctly when indexing into the array but after entering one character the input loses focus.
You can find the working code here on this fiddle : http://jsfiddle/QygW8/

解决方案

I think this is happening because you are manipulating the same item which is iterated over ng-repeat. So ng-repeat sees a change in the item and re-runs the `ng-repeat which regenerates the items.

If you look at your fiddle html, you may notice this effect.

To make it work, one way you can do this

http://jsfiddle/cmyworld/CvLBS/

where you change your array to object array

$scope.itemsInArray = [{data:"strA"}, {data:"strB"}, {data:"strC"}];

and then bind to item.data

这篇关于绑定输入在 angularjs 中变得不集中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！