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

IT技术 javascript angularjs
2021-01-20 15:35:24

我正在尝试处理 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 名称的最佳方法吗？

2个回答

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

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

小提琴。

要更深入地了解作用域和 ng-repeat，请参阅AngularJS 中作用域原型/原型继承的细微差别是什么？, 部分ng-repeat。

那么被迭代的项目必须是对象吗？换句话说，它们不能是原始类型，例如字符串，例如 $scope.lines = ['a', 'b', 'c'] ？
2021-03-16 15:35:24
我有一个类似的 ng-repeat/ng-model 问题。我做了一些研究，我想我快到了。如果有人能看一看，我将不胜感激。 stackoverflow.com/questions/32855575/...
2021-03-22 15:35:24
这段代码的 e2e 测试怎么样？我的意思是如果模型是动态的，如何选择输入？
2021-03-31 15:35:24
@berto，是的，它们必须是对象。这在链接的参考资料“范围原型的细微差别是什么......”中进行了讨论。
2021-04-14 15:35:24 
<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>
其它你可能感兴趣的问题
上一篇HTML 锚链接 - href 和 onclick 两者？ 下一篇javascript：检测滚动结束