在AngularJS中ng-repeat循环中绑定ng模型。

I'm trying to deal with the issue of scope inside of an ng-repeat loop - I've browsed quite a few questions but have not quite been able to get my code to work.

我正在尝试处理一个ng-repeat循环中范围的问题——我浏览了很多问题，但还没能让我的代码正常工作。

Controller code:

控制器代码:

function Ctrl($scope) {
  $scope.lines = [{text: 'res1'}, {text:'res2'}];
}

View:

观点:

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

Here's a fiddle: http://jsfiddle.net/cyberwombat/zqTah/

这是一个小提琴:http://jsfiddle.net/cyberwombat/zqTah/

Basically I have an object (it's a flyer generator) which contains multiple lines of text. Each line of text can be tweaked by the user (text, font, size, color, etc) and I want to create a preview for it. The example above only shows the input field to enter text and I would like that to automatically/as-you-type update the preview div but there will be many more controls.

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

I am also not sure I got the code right for the looping index - is that the best way to create a ng-model name inside the loop?

我也不确定循环索引的代码是否正确——这是在循环中创建ng-model名称的最佳方式吗?

2 个解决方案

#1

113

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

对于ng-repeat循环的每次迭代，line是对数组中的对象的引用。因此，要预览值，请使用{{{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).

类似地，将数据库与文本绑定在一起:ng-model="line.text"。使用ng-model时不需要使用value(实际上不需要)。

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.

为了更深入地了解范围和ng-repeat，请参见AngularJS中范围原型/原型继承的细微差别?,部分ng-repeat。

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

#1

113