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

基本上，我有一个包含多行文本的对象（它是传单生成器）。用户可以调整每一行文本（文本，字体，大小，颜色等），我想为其创建预览。上面的示例仅显示了输入字段以输入文本，我希望该字段可以自动/按需更新预览div，但是会有更多控件。

我也不确定我是否正确使用了循环索引的代码-这是在循环内创建ng-model名称的最佳方法吗？

javascript angularjs

— 网络袋熊
source

小提琴似乎没有用..

— philx_x 2014年

Answers:

116

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

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

小提琴。

有关作用域和ng-repeat的更深入了解，请参阅AngularJS中作用域原型/原型继承的细微差别是什么？，第ng-repeat节。

— 马克·拉杰科克
source

这段代码的e2e测试怎么样？我的意思是如果模型是动态的，如何选择输入？

— devmao 2013年

那么，被迭代的项是否必须是对象？换句话说，它们不能是基元，例如字符串，例如$ scope.lines = ['a'，'b'，'c']吗？

— berto

@berto，是的，它们必须是对象。在链接的参考文献“作用域原型的细微差别是什么...”中对此进行了讨论。

— Mark Rajcok

我有一个类似的ng-repeat / ng-model问题。我已经做了一些研究，我想我快到了。如果有人可以看看，我将非常感激。 stackoverflow.com/questions/32855575/…–

— user1532669

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

— 印巴
source