AngularJS'de ng-tekrar döngüsü içinde bağlama ng modeli

Bir ng-tekrar döngüsünün içindeki kapsam sorunuyla ilgilenmeye çalışıyorum - epeyce soruya göz attım ancak kodumun çalışmasını tam olarak sağlayamadım.

Denetleyici kodu:

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

Görünüm:

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

İşte bir keman: http://jsfiddle.net/cyberwombat/zqTah/

Temel olarak, birden çok metin satırı içeren bir nesnem var (bu bir el ilanı oluşturucu). Her metin satırı kullanıcı tarafından ayarlanabilir (metin, yazı tipi, boyut, renk, vb.) Ve bunun için bir önizleme oluşturmak istiyorum. Yukarıdaki örnek, yalnızca metin girmek için giriş alanını gösterir ve bunun önizleme bölmesini otomatik olarak / yazarken güncellemesini isterim, ancak daha birçok kontrol olacaktır.

Döngü indeksi için doğru kodu aldığımdan da emin değilim - döngü içinde bir ng modeli adı oluşturmanın en iyi yolu bu mu?

Ng-tekrar döngüsünün her yinelemesi lineiçin, dizinizdeki bir nesneye referanstır. Bu nedenle, değeri önizlemek için kullanın {{line.text}}.

Benzer şekilde, aynı metin, DataBind için databind için: ng-model="line.text". valueNg modelini kullanırken kullanmanıza gerek yoktur (aslında kullanmamalısınız).

Keman .

Kapsamlara ve ng-yinelemeye daha derinlemesine bir bakış için bkz.AngularJS'de kapsam prototipi / prototip kalıtımın nüansları nelerdir? , bölüm ng-tekrar .

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