169

私は一連の<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 つをクリックすると、selected の値が設定され、<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>

4

2 に答える 2

205

ここでの問題は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>

プランカーを見る

于 2013-07-29T13:40:50.397 に答える
30

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>
于 2013-07-29T13:47:08.450 に答える