ng-model，ng-repeat和input很难
我试图让用户通过使用ngRepeat和ngModel编辑项目列表。 然而，我尝试过的两种方法都导致了奇怪的行为：一种不更新模型，另一种模糊每个keydown上的表单。
我在这里做错了什么？ 这不是一个支持的用例吗？
这里是从小提琴的代码，复制方便：
<html ng-app> <head> <link href="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>
这似乎是一个有约束力的问题。
build议是不绑定到基元 。
你的ngRepeat正在对一个集合内的string进行迭代，当它迭代对象。 解决你的问题
<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/
使用Angular最新版本（1.2.1）和$index 。 此问题已修复
<div ng-repeat="(i, name) in names track by $index"> Value: {{name}} <input ng-model="names[i]"> </div>
当需要了解如何使用NgModelController的 范围 ngRepeat和ngModel工作时，会遇到困难的情况。 也尝试使用1.0.3版本。 你的例子会有所不同。
您可以简单地使用由jm-
但是如果你想更深入地处理这种情况，你必须明白：
- AngularJS是如何工作的 ;
- 范围有层次结构;
- ngRepeat为每个元素创build一个新的范围;
- ngRepeat用附加信息（hashKey）构build项目的caching; 在每一个监视器上调用每一个新的项目（不在caching中）ngRepeat构造新的范围，DOM元素等更详细的描述 。
- 从1.0.3 ngModelController重新input实际模型值。
你的例子“直接绑定到每个元素”如何适用于AngularJS 1.0.3：
- 你input字母
'f'; -
ngModelController为项目范围更改模型（名称数组name == 'Samf'）=>name == 'Samf'，names == ['Sam', 'Harry', 'Sally']; -
$digest循环开始; -
ngRepeat用来自项目范围（'Samf'）的模型值replace为未改变名称数组（'Sam'）的值; -
ngModelController用实际模型值（'Sam'）ngModelControllerinputinput。
您的示例“索引到数组中”的工作原理：
- 你input字母
'f'; -
ngModelController改变了名字array=>`names == ['Samf'，'Harry'，'Sally']; - $ digest循环开始;
-
ngRepeat在caching中找不到'Samf'; -
ngRepeat创build新的作用域，添加新的div元素与新的input（这就是为什么input领域失去了重点 – 旧的div与旧的input被新的div与新的input）; - 呈现新DOM元素的新值。
此外，你可以尝试使用AngularJS Batarang ，看看你input的input如何修改div范围的$ id。
如果您不需要使用每个关键笔划更新模型，只需绑定到name ，然后更新blur事件上的数组项：
<div ng-repeat="name in names"> Value: {{name}} <input ng-model="name" ng-blur="names[$index] = name" /> </div>
我只是更新了AngularJs到1.1.2，没有问题。 我想这个错误是固定的。
http://ci.angularjs.org/job/angular.js-pete/57/artifact/build/angular.js
我试过上面的解决scheme，我的问题就像一个魅力。 谢谢！
http://jsfiddle.net/leighboone/wn9Ym/7/
这是我的版本：
var myApp = angular.module('myApp', []); function MyCtrl($scope) { $scope.models = [{ name: 'Device1', checked: true }, { name: 'Device1', checked: true }, { name: 'Device1', checked: true }]; }
和我的HTML
<div ng-app="myApp"> <div ng-controller="MyCtrl"> <h1>Fun with Fields and ngModel</h1> <p>names: {{models}}</p> <table class="table table-striped"> <thead> <tr> <th></th> <th>Feature 1</td> <th>Feature 2</th> <th>Feature 3</th> </tr> </thead> <tbody> <tr> <td>Device</td> <td ng-repeat="modelCheck in models" class=""> <span> {{modelCheck.checked}} </span> </td> </tr> <tr> <td> <label class="control-label">Which devices?</label> </td> <td ng-repeat="model in models">{{model.name}} <input type="checkbox" class="checkbox inline" ng-model="model.checked" /> </td> </tr> </tbody> </table> </div> </div>
这个问题似乎与ng-model如何与input工作，并覆盖name对象，使其在ng-repeat丢失。
作为解决方法，可以使用以下代码：
<div ng-repeat="name in names"> Value: {{name}} <input ng-model="names[$index]"> </div>
希望它有帮助
如何做这样的事情：
<select ng-model="myModel($index+1)">
而在我的检查员元素是：
<select ng-model="myModel1"> ... <select ng-model="myModel2">
