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

我试图处理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/

基本上我有一个对象（这是一个传单生成器），其中包含多行文字。 每行文本可以由用户（文本，字体，大小，颜色等）调整，我想创build一个预览。 上面的例子只显示了input文本的input字段，我希望能够自动/尽可能地更新预览div，但是会有更多的控制。

我也不知道我得到了循环索引的代码 – 是在循环内创build一个ng模型名称的最好方法吗？

Answer 1

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

同样，要绑定到文本，数据绑定也是一样的： ng-model="line.text" 。 使用ng-model时不需要使用value （实际上不应该）。

小提琴 。

为了更深入地了解范围和ng-repeat，请参阅AngularJS中范围原型/原型inheritance的细微差别？ ，部分重复 。

Answer 2

 <h4>Order List</h4> <ul> <li ng-repeat="val in filter_option.order"> <span> <input title="{{filter_option.order_name[$index]}}" type="radio" ng-model="filter_param.order_option" ng-value="'{{val}}'" /> &nbsp;{{filter_option.order_name[$index]}} </span> <select title="" ng-model="filter_param[val]"> <option value="asc">Asc</option> <option value="desc">Desc</option> </select> </li> </ul>