ng-repeat 내에서 $ index를 사용하여 클래스를 활성화하고 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클래스 전류가 적절한 시간에 설정되고 DIVA0, A1, A2 및 A3에 대한 적절한 시간에 쇼 <li>와<DIV>

여기서 문제 ng-repeat는 자체 범위 를 만드는 것이므로 그렇게하면 기존 범위를 변경하지 않고 해당 범위에 selected=$index새 selected속성을 만듭니다 . 이 문제를 해결하려면 두 가지 옵션이 있습니다.

선택된 속성을 기본이 아닌 것으로 변경하십시오 (즉, 객체 또는 배열, 자바 스크립트가 프로토 타입 체인을 조회하도록하십시오).

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