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

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.