[解決済み] 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>

ユーザが上記のaddress要素の一つをクリックすると、selectedの値が設定され、その中の一つを表示します。 <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>

これは、最初の2つのケースで動作します。

• ユーザーがABCをクリックすると、最初の <DIV> は100と表示され、色が赤に変わる。
• DEFをクリックすると、101が表示され、DEFが赤色に変わります。

しかし、A0, A1, A2, A3では全く動作しません。

• A0、A1、A2、A3をクリックすると、正しい値が表示されず、選択した値が設定されず、ng-repeat 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 が作成され、新しい 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>

プランカー参照