我正在尝试处理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名称的最佳方法吗?
对于ng-repeat循环的每次迭代,line都是对数组中对象的引用。因此,要预览值,请使用{{line.text}}。
line
{{line.text}}
类似地,要将数据绑定到文本,将数据绑定到相同的:ng-model="line.text"。value使用ng- model时不需要使用(实际上不应该使用)。
ng-model="line.text"
value
小提琴。
有关作用域和ng-repeat的更深入了解,请参阅[AngularJS中作用域原型/原型继承的细微差别是什么?,第 ng-repeat 节。