在 AngularJS 中的 ng-repeat 循環中綁定 ng-model

Question

我正在嘗試處理 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 名稱的最佳方法嗎？

Answer 1

對於 ng-repeat 循環的每次迭代， line是對數組中對象的引用。 因此，要預覽值，請使用{{line.text}} 。

同樣，要數據綁定到文本，數據綁定到相同： ng-model="line.text" 。 使用 ng-model 時您不需要使用value （實際上您不應該使用）。

小提琴。

要更深入地了解作用域和 ng-repeat，請參閱AngularJS 中作用域原型/原型繼承的細微差別是什么？ , 部分ng-repeat 。

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