Làm cách nào tôi có thể sử dụng chỉ mục $ bên trong ng-repeat để kích hoạt một lớp và hiển thị DIV?

Tôi có một bộ các <li>yếu tố.

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

Khi người dùng nhấp vào một trong các thành phần địa chỉ ở trên thì nó sẽ, đặt giá trị được chọn và hiển thị một trong các <DIV>thành phần bên dưới:

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

Điều này làm việc cho hai trường hợp đầu tiên.

• Khi người dùng nhấp vào ABC thì cái đầu tiên <DIV>hiển thị 100 và đổi màu thành màu đỏ.
• Khi DEF được nhấp thì 101 hiển thị và DEF thay đổi thành màu đỏ.

Tuy nhiên, nó hoàn toàn không hoạt động đối với A0, A1, A2 và A3

• Khi người dùng nhấp vào A0, A1, A2 hoặc A3 thì không hiển thị đúng, giá trị đã chọn không được đặt và màu của TẤT CẢ các lần lặp lại A0, A1, A2 và A3 chuyển sang màu đỏ.

Điều này được hiển thị tốt nhất nếu bạn nhìn vào Plunker này:

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

Lưu ý rằng ở đầu tôi đã thêm {{ selected }}dưới dạng hỗ trợ gỡ lỗi ở đầu. Ngoài ra, x in [4,5,6,7]chỉ có nghĩa là để mô phỏng một vòng lặp. Trong cuộc sống thực, tôi có điều này như ng-repeat="answer in modal.data.answers".

Có ai biết làm thế nào tôi có thể thiết lập điều này để lidòng điện lớp được đặt đúng lúc và các DIVchương trình vào đúng thời điểm cho A0, A1, A2 và A3 <li>và<DIV>

Vấn đề ở đây là ng-repeattạo ra phạm vi riêng của nó, vì vậy khi bạn thực hiện selected=$indexnó sẽ tạo một thuộc tính mới selectedtrong phạm vi đó thay vì thay đổi phạm vi hiện có. Để khắc phục điều này, bạn có hai tùy chọn:

Thay đổi thuộc tính được chọn thành không nguyên thủy (tức là đối tượng hoặc mảng, làm cho javascript tìm chuỗi nguyên mẫu), sau đó đặt giá trị trên đó:

$scope.selected = {value: 0};

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

Xem plunker

hoặc là

Sử dụng $parentbiến để truy cập vào tài sản chính xác. Mặc dù ít được đề xuất hơn vì nó làm tăng sự khớp nối giữa các phạm vi

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

Xem plunker

Như johnnyynnoj đã đề cập ng-repeat tạo ra một phạm vi mới. Trong thực tế tôi sẽ sử dụng một hàm để đặt giá trị. Xem plunker

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>