Bagaimana saya bisa menggunakan $ index di dalam ng-repeat untuk mengaktifkan kelas dan menampilkan DIV?

Saya memiliki serangkaian <li>elemen.

<ul>
  <li ng-class="{current: selected == 100}">
     <a href ng:click="selected=100">ABC</a>
  </li>
  <li ng-class="{current: selected == 101}">
     <a href ng:click="selected=101">DEF</a>
  </li>
  <li ng-class="{current: selected == $index }" 
      ng-repeat="x in [4,5,6,7]">
     <a href ng:click="selected=$index">A{{$index}}</a>
  </li>
</ul>

Ketika seorang pengguna mengklik salah satu elemen alamat di atas maka seharusnya, atur nilai yang dipilih dan tunjukkan salah satu <DIV>elemen di bawah ini:

<div  ng:show="selected == 100">100</div>
<div  ng:show="selected == 101">101</div>
<div ng-repeat="x in [4,5,6,7]" ng:show="selected == $index">{{ $index }}</div>

Ini berfungsi untuk dua kasus pertama.

• Ketika pengguna mengklik ABC maka yang pertama <DIV>menunjukkan 100 dan berubah warna menjadi merah.
• Ketika DEF diklik maka 101 menunjukkan dan DEF berubah menjadi merah.

Namun tidak berfungsi sama sekali untuk A0, A1, A2 dan A3

• Ketika pengguna mengklik A0, A1, A2 atau A3 maka yang benar tidak muncul, nilai yang dipilih tidak diatur dan warna SEMUA A-ulangi A0, A1, A2 dan A3 berubah menjadi merah.

Ini paling baik ditampilkan jika Anda melihat Plunker ini:

http://plnkr.co/edit/7HMeObplaBkx5R0SntjY?p=preview

Perhatikan bahwa di bagian atas saya telah menambahkan {{ selected }}sebagai alat bantu debug di bagian atas. Juga x in [4,5,6,7]hanya dimaksudkan untuk mensimulasikan loop. Dalam kehidupan nyata saya memiliki ini sebagaing-repeat="answer in modal.data.answers" .

Adakah yang tahu bagaimana saya bisa mengatur ini sehingga liarus kelas diatur pada waktu yang tepat dan DIVpertunjukan pada waktu yang tepat untuk A0, A1, A2 dan A3 <li>dan<DIV>

Masalahnya di sini adalah yang ng-repeatmenciptakan ruang lingkupnya sendiri, jadi ketika Anda melakukannya selected=$indexmenciptakan selectedproperti baru dalam ruang lingkup itu daripada mengubah yang ada. Untuk memperbaikinya, Anda memiliki dua opsi:

Ubah properti yang dipilih menjadi non-primitif (yaitu objek atau array, yang membuat javascript mencari rantai prototipe) kemudian menetapkan nilai untuk itu:

$scope.selected = {value: 0};

<a ng-click="selected.value = $index">A{{$index}}</a>

Lihat penyedot

atau

Gunakan $parentvariabel untuk mengakses properti yang benar. Meskipun kurang direkomendasikan karena meningkatkan kopling antar cakupan

<a ng-click="$parent.selected = $index">A{{$index}}</a>

Lihat penyedot

Seperti johnnyynnoj disebutkan ng-repeat menciptakan ruang lingkup baru. Saya sebenarnya akan menggunakan fungsi untuk mengatur nilai. Lihat penyedot

JS :

$scope.setSelected = function(selected) {
  $scope.selected = selected;
}

HTML :

{{ selected }}

<ul>
  <li ng-class="{current: selected == 100}">
     <a href ng:click="setSelected(100)">ABC</a>
  </li>
  <li ng-class="{current: selected == 101}">
     <a href ng:click="setSelected(101)">DEF</a>
  </li>
  <li ng-class="{current: selected == $index }" 
      ng-repeat="x in [4,5,6,7]">
     <a href ng:click="setSelected($index)">A{{$index}}</a>
  </li>
</ul>

<div  
  ng:show="selected == 100">
  100        
</div>
<div  
  ng:show="selected == 101">
  101        
</div>
<div ng-repeat="x in [4,5,6,7]" 
  ng:show="selected == $index">
  {{ $index }}        
</div>