Come posso usare l’indice $ all’interno di una ng-repeat per abilitare una class e mostrare un DIV?

Ho un set di elementi

  • .

      

    Quando un utente fa clic su uno degli elementi di indirizzo di cui sopra allora dovrebbe, impostare il valore di selezionato e mostrare uno degli elementi

    seguito:

     
    100
    101
    {{ $index }}

    Questo funziona per i primi due casi.

    • Quando l’utente fa clic su ABC, il primo
      mostra 100 e cambia colore in rosso.
    • Quando si fa clic su DEF, 101 mostra e DEF diventa rosso.

    Tuttavia non funziona affatto per A0, A1, A2 e A3

    • Quando un utente fa clic su A0, A1, A2 o A3 quindi il corretto non viene visualizzato, il valore selezionato non viene impostato e il colore di TUTTA la ripetizione ng A0, A1, A2 e A3 diventa rosso.

    Questo è meglio mostrato se guardi questo Plunker:

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

    Nota che all’inizio ho aggiunto {{ selected }} come aiuto per il debug in cima. Anche la x in [4,5,6,7] scopo di simulare un loop. Nella vita reale ho questo come ng-repeat="answer in modal.data.answers" .

    Qualcuno sa come posso impostare questo in modo che la corrente di class li sia impostata al momento giusto e il DIV mostri al momento giusto per A0, A1, A2 e A3

  • e

    Il problema qui è che ng-repeat crea il proprio ambito, quindi quando si selected=$index crea una nuova proprietà selected in quell’ambito invece di alterarne quella esistente. Per risolvere questo hai due opzioni:

    Cambia la proprietà selezionata in una non primitiva (cioè object o array, che fa sì che javascript cerchi la catena del prototipo) quindi imposta un valore su quello:

     $scope.selected = {value: 0}; A{{$index}} 

    Vedi plunker

    o

    Usa la variabile $parent per accedere alla proprietà corretta. Anche se meno consigliato in quanto aumenta l’accoppiamento tra gli ambiti

     A{{$index}} 

    Vedi plunker

  • Come johnnyynnoj ha menzionato ng-repeat crea un nuovo scope. In effetti, utilizzerei una funzione per impostare il valore. Vedi plunker

    JS :

     $scope.setSelected = function(selected) { $scope.selected = selected; } 

    HTML :

     {{ selected }}  
    100
    101
    {{ $index }}