ng-repeat 내의 $index를 사용하여 클래스를 활성화하고 DIV를 표시하려면 어떻게 해야 합니까?

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반복 A0, A1, A2, A3의 모든 색상이 빨간색으로 변한다.

이 플런커를 보면 가장 잘 알 수 있습니다.

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새로운 a를 만듭니다.selected기존 속성을 변경하는 것이 아니라 해당 범위의 속성입니다.이 문제를 해결하려면 다음 두 가지 옵션이 있습니다.

선택한 속성을 비원시성(즉, javascript가 프로토타입 체인을 검색하도록 하는 객체 또는 배열)으로 변경한 다음 값을 설정합니다.

$scope.selected = {value: 0};

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

'플런커' 참조

또는

를 사용합니다.$parentvariable을 클릭하여 올바른 속성에 액세스합니다.스코프 간 결합이 증가하므로 권장되지 않지만

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

'플런커' 참조

jonnyynnoj가 언급했듯이 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>

언급URL : https://stackoverflow.com/questions/17925355/how-can-i-use-the-index-inside-a-ng-repeat-to-enable-a-class-and-show-a-div