在AngularJS NG-REPEAT循环内绑定NG-模型 [英] Binding ng-model inside ng-repeat loop in AngularJS
问题描述
我想处理范围的NG-repeat循环内的问题 - 我浏览了不少问题,但还没有完全能够得到我的code工作。
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.
控制器code:
function Ctrl($scope) {
$scope.lines = [{text: 'res1'}, {text:'res2'}];
}
查看:
<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>
下面是一个小提琴: http://jsfiddle.net/cyberwombat/zqTah/
基本上我有一个对象(这是一个宣传单生成器),其中包含多行文本。文本的每一行可以由用户(文字,字体,大小,颜色等)进行调整,我想创建一个preVIEW它。只有上面的例子显示输入字段输入文字,我想,要自动/为你型更新preVIEW格但会有更多的控制。
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.
我也不能肯定我得到了循环指数code正确 - 是最好的办法,以在循环中创建一个NG-型号名称
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重复循环的每个迭代,行
是数组中的对象的引用。因此,preVIEW值,使用 {{} line.text}
。
For each iteration of the ng-repeat loop, line
is a reference to an object in your array. Therefore, to preview the value, use {{line.text}}
.
同样,数据绑定到文本,数据绑定到相同的: NG-模式=line.text
。你并不需要使用值
使用时NG-模型(其实你不应该)。
Similarly, to databind to the text, databind to the same: ng-model="line.text"
. You don't need to use value
when using ng-model (actually you shouldn't).
小提琴。
对于更深入地了解范围和NG-重复,请参阅What范围是原型/原型继承的细微差别AngularJS?,部分 NG-重复
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.
这篇关于在AngularJS NG-REPEAT循环内绑定NG-模型的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!