angularjs - llamar - ¿Cómo puedo usar el índice $ dentro de una repetición ng para habilitar una clase y mostrar un DIV?

ng-model

Question

Tengo un conjunto de elementos <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>

Cuando un usuario hace clic en uno de los elementos de dirección arriba, entonces debe, establecer el valor de seleccionado y mostrar uno de los elementos <DIV> continuación:

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

Esto funciona para los dos primeros casos.

• Cuando el usuario hace clic en ABC, el primer <DIV> muestra 100 y cambia el color a rojo.
• Cuando se hace clic en DEF, 101 muestra y DEF cambia a rojo.

Sin embargo, no funciona en absoluto para A0, A1, A2 y A3

• Cuando un usuario hace clic en A0, A1, A2 o A3, no se muestra el correcto, el valor seleccionado no se establece y el color de TODAS las repeticiones ng A0, A1, A2 y A3 cambia a rojo.

Esto se ve mejor si miras este Plunker:

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

Tenga en cuenta que en la parte superior he agregado {{ selected }} como auxiliar de depuración en la parte superior. Además, la x in [4,5,6,7] solo pretende simular un bucle. En la vida real tengo esto como ng-repeat="answer in modal.data.answers" .

¿Alguien sabe cómo puedo configurar esto para que la corriente de clase li se establezca en el momento adecuado y el DIV muestra en el momento adecuado para A0, A1, A2 y A3 <li> y <DIV>

Answer 1

Como johnnyynnoj mencionó ng-repeat crea un nuevo alcance. De hecho, usaría una función para establecer el valor. Ver 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>

Answer 2

El problema aquí es que ng-repeat crea su propio alcance, por lo que cuando selected=$index crea una nueva propiedad selected en ese alcance en lugar de alterar la existente. Para solucionar esto tienes dos opciones:

Cambie la propiedad seleccionada a una no primitiva (es decir, objeto o matriz, que hace que javascript busque la cadena del prototipo) y luego establezca un valor en eso:

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

Ver Plunker

o

Use la variable $parent para acceder a la propiedad correcta. Aunque menos recomendado, ya que aumenta el acoplamiento entre los ámbitos

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

Ver Plunker