要素のセットがあります<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>
これは最初の 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クラスの電流が適切なタイミングで設定され、DIVA0、A1、A2、A3の番組が適切なタイミングで表示される<li>ように設定する方法を誰か知っていますか？<DIV>
ベストアンサー1
ここでの問題は、 が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>