Mengikat ng-model di dalam ng-repeat loop di AngularJS

95

Saya mencoba menangani masalah ruang lingkup di dalam loop ng-repeat - Saya telah menjelajahi beberapa pertanyaan tetapi belum cukup bisa membuat kode saya berfungsi.

Kode pengontrol:

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

Melihat:

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

Ini biola: http://jsfiddle.net/cyberwombat/zqTah/

Pada dasarnya saya memiliki sebuah objek (ini adalah generator selebaran) yang berisi banyak baris teks. Setiap baris teks dapat diubah oleh pengguna (teks, font, ukuran, warna, dll) dan saya ingin membuat pratinjau untuk itu. Contoh di atas hanya menampilkan kolom input untuk memasukkan teks dan saya ingin agar secara otomatis / saat Anda mengetik memperbarui div pratinjau tetapi akan ada lebih banyak kontrol.

Saya juga tidak yakin saya mendapatkan kode yang tepat untuk indeks perulangan - apakah itu cara terbaik untuk membuat nama model-ng di dalam perulangan?

javascript angularjs cyberwombat
sumber
1
biola sepertinya tidak bekerja ..
philx_x

Jawaban:

117

Untuk setiap iterasi pengulangan ng-repeat, lineadalah referensi ke sebuah objek dalam larik Anda. Oleh karena itu, untuk melihat nilai, gunakan {{line.text}}.

Demikian pula, untuk dataBind pada teks, dataBind untuk sama: ng-model="line.text". Anda tidak perlu menggunakan valuesaat menggunakan ng-model (sebenarnya tidak seharusnya).

Biola .

Untuk melihat lebih dalam pada scope dan ng-repeat, lihat Apa nuansa dari scope prototypal / prototypical inheritance di AngularJS? , bagian ng-ulangi .

Mark Rajcok
sumber
bagaimana dengan tes e2e dari kode ini? Maksud saya bagaimana memilih input jika modelnya dinamis?
devmao
1
Apakah item yang diiterasi harus berupa objek? Dengan kata lain, mereka tidak boleh primitif, seperti string, misalnya $ scope.lines = ['a', 'b', 'c']?
berto
2
@berto, ya, mereka pasti objek. Hal ini dibahas dalam referensi terkait, "Apa nuansa prototipe cakupan ...".
Mark Rajcok
Saya punya masalah ng-repeat / ng-model yang serupa. Saya telah melakukan beberapa penelitian dan saya pikir saya hampir sampai. Jika ada yang bisa melihatnya, saya akan sangat menghargainya. stackoverflow.com/questions/32855575/…
pengguna1532669
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
sumber