Прив'язка ng-моделі всередині циклу ng-repeat у AngularJS

Я намагаюся вирішити проблему обсягу всередині циклу 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-моделі всередині циклу?

Для кожної ітерації циклу ng-repeat lineє посилання на об'єкт у вашому масиві. Тому для попереднього перегляду значення використовуйте {{line.text}}.

Точно так же, щоб прив'язка до тексту, DataBind до того ж: ng-model="line.text". Вам не потрібно використовувати valueпри використанні ng-моделі (насправді не слід).

Скрипка .

Для більш поглибленого розгляду областей застосування та ng-repeat, див. Які нюанси сфери наслідування prototypal / prototytype успадковуються в AngularJS? , розділ 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>