ng-model、ng-repeat 和输入的困难 [英] Difficulty with ng-model, ng-repeat, and inputs
问题描述
我试图允许用户使用 ngRepeat 和 ngModel 来编辑项目列表.(参见这个小提琴.)但是，我尝试过的两种方法都会导致奇怪的行为:一种不更新模型，另一个模糊每个按键上的表单.
我在这里做错了吗?这不是受支持的用例吗?
这是小提琴中的代码，为方便起见复制:
<头><link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet"><body ng-init="names = ['Sam', 'Harry', 'Sally']"><h1>有趣的字段和 ngModel</h1><p>名称:{{名称}}</p><h3>直接绑定到每个元素:</h3><div ng-repeat="name in names">值:{{name}}<输入 ng-model="名称"><p class="muted">绑定似乎不起作用:模型中的值没有改变.</p><h3>索引到数组中:</h3><div ng-repeat="name in names">值:{{names[$index]}}<input ng-model="names[$index]">
<p class="muted">输入一个字符，输入框失去焦点.然而，绑定似乎工作正常. </p></html>
这似乎是一个绑定问题.
建议是不要绑定到原语.
您的 ngRepeat 正在迭代集合内的字符串，而它应该迭代对象.解决您的问题
<h1>有趣的字段和 ngModel</h1><p>名称:{{models}}</p><h3>直接绑定到每个元素:</h3><div ng-repeat="模型中的模型">值:{{model.name}}<input ng-model="model.name">jsfiddle:http://jsfiddle.net/jaimem/rnw3u/5/
I am trying to allow the user to edit a list of items by using ngRepeat and ngModel. (See this fiddle.) However, both approaches I've tried lead to bizarre behavior: one doesn't update the model, and the other blurs the form on each keydown.
Am I doing something wrong here? Is this not a supported use case?
Here is the code from the fiddle, copied for convenience:
<html ng-app>
<head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body ng-init="names = ['Sam', 'Harry', 'Sally']">
<h1>Fun with Fields and ngModel</h1>
<p>names: {{names}}</p>
<h3>Binding to each element directly:</h3>
<div ng-repeat="name in names">
Value: {{name}}
<input ng-model="name">
</div>
<p class="muted">The binding does not appear to be working: the value in the model is not changed.</p>
<h3>Indexing into the array:</h3>
<div ng-repeat="name in names">
Value: {{names[$index]}}
<input ng-model="names[$index]">
</div>
<p class="muted">Type one character, and the input field loses focus. However, the binding appears to be working correctly.</p>
</body>
</html>
This seems to be a binding issue.
The advice is don't bind to primitives.
Your ngRepeat is iterating over strings inside a collection, when it should be iterating over objects. To fix your problem
<body ng-init="models = [{name:'Sam'},{name:'Harry'},{name:'Sally'}]">
<h1>Fun with Fields and ngModel</h1>
<p>names: {{models}}</p>
<h3>Binding to each element directly:</h3>
<div ng-repeat="model in models">
Value: {{model.name}}
<input ng-model="model.name">
</div>
jsfiddle: http://jsfiddle.net/jaimem/rnw3u/5/
这篇关于ng-model、ng-repeat 和输入的困难的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
