Wiązanie modelu ng w pętli ng-repeat w AngularJS

96

Próbuję poradzić sobie z problemem zasięgu wewnątrz pętli ng-repeat - przeglądałem kilka pytań, ale nie byłem w stanie uruchomić mojego kodu.

Kod kontrolera:

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

Widok:

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

Oto skrzypce: http://jsfiddle.net/cyberwombat/zqTah/

Zasadniczo mam obiekt (jest to generator ulotek), który zawiera wiele wierszy tekstu. Każdy wiersz tekstu może zostać zmodyfikowany przez użytkownika (tekst, czcionka, rozmiar, kolor itp.) I chcę utworzyć dla niego podgląd. Powyższy przykład pokazuje tylko pole wejściowe do wprowadzania tekstu i chciałbym, aby automatycznie / podczas pisania aktualizowało podgląd div, ale będzie znacznie więcej elementów sterujących.

Nie jestem też pewien, czy mam odpowiedni kod dla indeksu zapętlonego - czy to najlepszy sposób na utworzenie nazwy modelu ng w pętli?

javascript angularjs cyberwombat
źródło
1
skrzypce chyba nie działają ...
philx_x,

Odpowiedzi:

117

Dla każdej iteracji pętli ng-repeat linejest odniesieniem do obiektu w twojej tablicy. Dlatego, aby wyświetlić podgląd wartości, użyj {{line.text}}.

Podobnie, aby databind do tekstu, DataBind do tego samego: ng-model="line.text". Nie musisz używać valuepodczas korzystania z modelu ng (właściwie nie powinieneś).

Fiddle .

Aby uzyskać bardziej szczegółowe informacje na temat zakresów i powtórzeń ng, zobacz Jakie są niuanse dziedziczenia prototypowego / prototypowego zakresu w AngularJS? , sekcja ng-powtórzyć .

Mark Rajcok
źródło
a co z testem e2e tego kodu? Mam na myśli, jak wybrać wejście, jeśli model jest dynamiczny?
devmao
1
Czy iterowane elementy muszą więc być obiektami? Innymi słowy, nie mogą być prymitywami, jak łańcuchy, np. $ Scope.lines = ['a', 'b', 'c']?
berto
2
@berto, tak, muszą to być obiekty. Jest to omówione w odnośniku „Jakie są niuanse zakresu prototypowego…”.
Mark Rajcok,
Mam podobny problem z powtarzaniem ng / modelem ng. Zrobiłem kilka badań i myślę, że prawie jestem na miejscu. Gdyby ktokolwiek mógł spojrzeć, naprawdę bym to docenił. 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
źródło