在 AngularJS 中的 ng-repeat 循环内绑定 ng-model

我正在尝试处理 ng-repeat 循环内部的范围问题 - 我已经浏览了很多问题，但还没有完全能够让我的代码正常工作。

控制器代码：

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>

这是一个小提琴：http://jsfiddle.net/cyberwombat/zqTah/

基本上我有一个对象（它是一个传单生成器），其中包含多行文本。用户可以调整每一行文本（文本、字体、大小、颜色等），我想为其创建预览。上面的示例仅显示用于输入文本的输入字段，我希望它能够自动/键入时更新预览 div，但还会有更多控件。

我也不确定我是否获得了适合循环索引的代码 - 这是在循环内创建 ng-model 名称的最佳方法吗？

对于 ng-repeat 循环的每次迭代，line是对数组中对象的引用。因此，要预览该值，请使用{{line.text}}.

同样，要数据绑定到文本，请数据绑定到相同的内容：ng-model="line.text"。你不需要使用value当使用 ng-model 时（实际上你不应该）。

Fiddle.

要更深入地了解范围和 ng-repeat，请参阅AngularJS 中的范围原型/原型继承有哪些细微差别？， 部分NG-重复.