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

Question

我正在尝试处理ng-repeat循环内的范围问题-我浏览了很多问题，但还无法使我的代码正常工作。

控制器代码：

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/

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

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

Answer 1

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

类似地，要将数据绑定到文本，将数据绑定到相同的：ng-model="line.text"。value使用ng-
model时不需要使用（实际上不应该使用）。

小提琴。

有关作用域和ng-repeat的更深入了解，请参阅[AngularJS中作用域原型/原型继承的细微差别是什么？，第
ng-repeat 节。