Связывание 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 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/

В принципе у меня есть объект (это генератор летчика), который содержит несколько строк текста. Каждая строка текста может быть изменена пользователем (текст, шрифт, размер, цвет и т.д.), И я хочу создать для него предварительный просмотр. В приведенном выше примере показано только поле ввода для ввода текста, и я хотел бы, чтобы это автоматически или как-то типа обновляло предварительный просмотр, но будет много других элементов управления.

Я также не уверен, что получил код для индекса цикла - это лучший способ создать имя ng-модели внутри цикла?

Ответы

Ответ 1

Для каждой итерации цикла ng-repeat line является ссылкой на объект в вашем массиве. Поэтому, чтобы просмотреть значение, используйте {{line.text}}.

Аналогично, для привязки к тексту, привязка данных к тому же: ng-model="line.text". Вам не нужно использовать value при использовании ng-model (на самом деле вы не должны).

Fiddle.

Для более подробного просмотра областей и ng-repeat см. Каковы нюансы объема прототипа/прототипа наследования в AngularJS?, раздел нг-повтор.

Ответ 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>