Comment puis-je utiliser le $index à l'intérieur d'un ng-repeat pour activer une classe et afficher un DIV ?

Question

J'ai un ensemble de <li> éléments.

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

Lorsqu'un utilisateur clique sur l'un des éléments d'adresse ci-dessus, il doit alors définir la valeur de selected et afficher l'un des éléments suivants <DIV> éléments ci-dessous :

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

Cela fonctionne pour les deux premiers cas.

• Lorsque l'utilisateur clique sur ABC, le premier <DIV> affiche 100 et change de couleur en rouge.
• Lorsque DEF est cliqué, 101 apparaît et DEF devient rouge.

Cependant, cela ne fonctionne pas du tout pour A0, A1, A2 et A3.

• Lorsqu'un utilisateur clique sur A0, A1, A2 ou A3, la valeur correcte ne s'affiche pas, la valeur sélectionnée n'est pas définie et la couleur de TOUS les ng-repeat A0, A1, A2 et A3 devient rouge.

La meilleure façon de le montrer est de regarder ce Plunker :

http://plnkr.co/edit/7HMeObplaBkx5R0SntjY?p=preview

Notez qu'en haut, j'ai ajouté {{ selected }} comme aide au débogage en haut de la page. De même, le x in [4,5,6,7] sont juste destinés à simuler une boucle. Dans la vie réelle, j'ai ceci ng-repeat="answer in modal.data.answers" .

Est-ce que quelqu'un sait comment je peux configurer cela pour que le li le courant de classe est établi au bon moment et la DIV montre au bon moment pour les A0, A1, A2 et A3 <li> y <DIV>

Answer 1

Le problème ici est que ng-repeat crée sa propre portée, donc lorsque vous faites selected=$index il crée un nouvel a selected dans cette portée plutôt que de modifier la propriété existante. Pour résoudre ce problème, vous avez deux possibilités :

Changez la propriété sélectionnée en une propriété non primitive (c'est-à-dire un objet ou un tableau, ce qui oblige javascript à consulter la chaîne des prototypes), puis définissez une valeur pour cette propriété :

$scope.selected = {value: 0};

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

Voir plunker

ou

Utilisez le $parent pour accéder à la bonne propriété. Bien que moins recommandé car il augmente le couplage entre les scopes.

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

Voir plunker

Answer 2

Comme l'a mentionné johnnyynnoj ng-repeat crée une nouvelle portée. En fait, j'utiliserais une fonction pour définir la valeur. Voir plunker

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>