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>

ユーザーが上記の住所要素の1つをクリックすると、そのはずです。その場合、選択された値を設定し、<DIV>以下の要素の1つを表示します。

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

これは最初の2つのケースで機能します。

• ユーザーが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プロパティを作成します。これを修正するには、2つのオプションがあります。

選択したプロパティを非プリミティブ（つまり、JavaScriptがプロトタイプチェーンを検索するようにするオブジェクトまたは配列）に変更し、その値を設定します。

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