ฉันจะใช้ $ index ใน ng-repeat เพื่อเปิดใช้งานคลาสและแสดง DIV ได้อย่างไร

ฉันมีชุดของ<li>องค์ประกอบ

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

เมื่อผู้ใช้คลิกที่หนึ่งในองค์ประกอบที่อยู่ด้านบนแล้วมันควรตั้งค่าของการเลือกและแสดง<DIV>องค์ประกอบหนึ่งด้านล่าง:

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

สิ่งนี้ใช้ได้กับสองกรณีแรก

• เมื่อผู้ใช้คลิก ABC สิ่งแรก<DIV>จะแสดง 100 และเปลี่ยนสีเป็นสีแดง
• เมื่อ DEF ถูกคลิกจากนั้น 101 แสดงและ DEF เปลี่ยนเป็นสีแดง

อย่างไรก็ตามมันไม่สามารถใช้งานได้กับ A0, A1, A2 และ A3

• เมื่อผู้ใช้คลิก A0, A1, A2 หรือ A3 จากนั้นไม่แสดงค่าที่ถูกต้องค่าที่เลือกจะไม่ถูกตั้งค่าและสีของค่า ng-repeat A0, A1, A2 และ A3 ทั้งหมดจะเปลี่ยนเป็นสีแดง

นี่จะแสดงได้ดีที่สุดถ้าคุณดูที่ Plunker นี้:

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

โปรดทราบว่าที่ด้านบนฉันได้เพิ่ม{{ selected }}เป็นเครื่องช่วยแก้จุดบกพร่องที่ด้านบน นอกจากนี้ยังx in [4,5,6,7]หมายถึงการจำลองวง ng-repeat="answer in modal.data.answers"ในชีวิตจริงฉันมีนี้เป็น

ไม่มีใครรู้วิธีที่ฉันสามารถตั้งค่านี้เพื่อให้การliเรียนในปัจจุบันถูกต้องในเวลาที่เหมาะสมและการDIVแสดงในเวลาที่เหมาะสมสำหรับ A0, A1, A2 และ A3 <li>และ<DIV>

ปัญหาที่นี่คือการng-repeatสร้างขอบเขตของตัวเองดังนั้นเมื่อคุณselected=$indexสร้างselectedสถานที่ให้บริการใหม่ในขอบเขตนั้นแทนที่จะเปลี่ยนขอบเขตที่มีอยู่ ในการแก้ไขปัญหานี้คุณมีสองตัวเลือก:

เปลี่ยนคุณสมบัติที่เลือกเป็น non-primitive (เช่น object หรือ array ซึ่งทำให้ javascript ค้นหา chain ต้นแบบ) จากนั้นตั้งค่าใน:

$scope.selected = {value: 0};

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

ดูพลั่ว

หรือ

ใช้$parentตัวแปรเพื่อเข้าถึงคุณสมบัติที่ถูกต้อง แนะนำให้ใช้น้อยแม้ว่าจะเพิ่มการมีเพศสัมพันธ์ระหว่างขอบเขต

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

ดูพลั่ว

ดังที่ johnnyynnoj กล่าวถึงng-repeatสร้างขอบเขตใหม่ อันที่จริงฉันใช้ฟังก์ชั่นเพื่อตั้งค่า ดูพลั่ว

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>