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

Binding ng-model inside ng-repeat loop in AngularJS

本文关键字：绑定 ng-model 循环 ng-repeat AngularJS      更新时间：2023-09-26

我正在尝试处理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}}。

同样，要绑定到文本，绑定到相同的:ng-model="line.text"。使用ng-model时不需要使用value(实际上不应该使用)。

小提琴。

要更深入地了解作用域和ng-repeat，请参见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>
相关文章：