问题描述
限时送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屋!
更多推荐
[db:关键词]
发布评论