Javascript 在 AngularJS 中的 ng-repeat 循环中绑定 ng-model
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14410993/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Binding ng-model inside ng-repeat loop in AngularJS
提问by cyberwombat
I'm trying to deal with the issue of scope inside of an ng-repeat loop - I've browsed quite a few questions but have not quite been able to get my code to work.
我正在尝试处理 ng-repeat 循环内的范围问题 - 我浏览了很多问题，但还没有完全能够让我的代码工作。
Controller code:
控制器代码：
function Ctrl($scope) {
$scope.lines = [{text: 'res1'}, {text:'res2'}];
}
View:
看法：
<div ng-app>
<div ng-controller="Ctrl">
<div ng-repeat="line in lines">
<div class="preview">{{text}}{{$index}}</div>
</div>
<div ng-repeat="line in lines">
<-- typing here should auto update it's preview above -->
<input value="{{line.text}}" ng-model="text{{$index}}"/>
<!-- many other fields here that will also affect the preview -->
</div>
</div>
</div>
Here's a fiddle: http://jsfiddle.net/cyberwombat/zqTah/
这是一个小提琴：http: //jsfiddle.net/cyberwombat/zqTah/
Basically I have an object (it's a flyer generator) which contains multiple lines of text. Each line of text can be tweaked by the user (text, font, size, color, etc) and I want to create a preview for it. The example above only shows the input field to enter text and I would like that to automatically/as-you-type update the preview div but there will be many more controls.
基本上我有一个包含多行文本的对象（它是一个传单生成器）。用户可以调整每一行文本（文本、字体、大小、颜色等），我想为它创建一个预览。上面的例子只显示了输入文本的输入字段，我希望它自动/按你输入更新预览 div，但会有更多的控件。
I am also not sure I got the code right for the looping index - is that the best way to create a ng-model name inside the loop?
我也不确定我的代码是否适合循环索引 - 这是在循环内创建 ng-model 名称的最佳方法吗？
回答by Mark Rajcok
For each iteration of the ng-repeat loop, lineis a reference to an object in your array. Therefore, to preview the value, use {{line.text}}.
对于 ng-repeat 循环的每次迭代，line是对数组中对象的引用。因此，要预览值，请使用{{line.text}}.
Similarly, to databind to the text, databind to the same: ng-model="line.text". You don't need to use valuewhen using ng-model (actually you shouldn't).
同样，要将数据绑定到文本，数据绑定到相同：ng-model="line.text"。value使用 ng-model 时不需要使用（实际上您不应该使用）。
小提琴。
For a more in-depth look at scopes and ng-repeat, see What are the nuances of scope prototypal / prototypical inheritance in AngularJS?, section ng-repeat.
要更深入地了解作用域和 ng-repeat，请参阅AngularJS 中作用域原型/原型继承的细微差别是什么？, 部分ng-repeat。
回答by imdba
<h4>Order List</h4>
<ul>
<li ng-repeat="val in filter_option.order">
<span>
<input title="{{filter_option.order_name[$index]}}" type="radio" ng-model="filter_param.order_option" ng-value="'{{val}}'" />
{{filter_option.order_name[$index]}}
</span>
<select title="" ng-model="filter_param[val]">
<option value="asc">Asc</option>
<option value="desc">Desc</option>
</select>
</li>
</ul>
