问题:
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 名称的最佳方法吗?