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

Question 1

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?

Question 2

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 .

Question 3

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