AngularJS 中 ng- 重复循环中 ng- 模型的绑定

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

基本上，我有一个对象(它是一个传单生成器) ，其中包含多行文本。用户可以对每行文本进行调整(文本、字体、大小、颜色等) ，我想为它创建一个预览。上面的例子只显示了输入文本的输入字段，我希望自动/as-you-type 更新预览 div，但是会有更多的控件。

我也不确定我得到了循环索引的正确代码-这是在循环中创建 n- 模型名称的最佳方式吗？

165913 次浏览

小开

最佳答案

For each iteration of the ng-repeat loop, line is a reference to an object in your array. Therefore, to preview the value, use \{\{line.text}}.

Similarly, to databind to the text, databind to the same: ng-model="line.text". You don't need to use value when using ng-model (actually you shouldn't).

Fiddle.

For a more in-depth look at scopes and ng-repeat, see What are the nuances of scope prototypal / prototypical inheritance in AngularJS?, section ng-repeat.

小开

<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>