Связывание ng-модели внутри цикла ng-repeat в AngularJS

95

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

javascript angularjs кибервомбат
источник
1
скрипка не работает ..
philx_x 04

Ответы:

117

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

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

Скрипка .

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

Марк Райкок
источник
как насчет теста e2e этого кода? Я имею в виду, как выбрать вход, если это модель динамическая?
devmao 01
1
Должны ли повторяющиеся элементы быть объектами? Другими словами, они не могут быть примитивами, такими как строки, например $ scope.lines = ['a', 'b', 'c']?
Берто
2
@berto, да, они должны быть объектами. Это обсуждается в связанной ссылке "Каковы нюансы прототипа области действия ...".
Марк Райкок
У меня аналогичная проблема с ng-repeat / ng-model. Я провел небольшое исследование и думаю, что почти готов. Если бы кто-нибудь мог взглянуть, я был бы очень признателен. stackoverflow.com/questions/32855575/…
user1532669
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>
imdba
источник