javascript - directivas - ng-if ejemplos
AngularJS-¿Cómo agregar múltiples directivas de clase ng? (4)
Creo que puedes separar los atributos ng-class
;
tratar:
ng-class=" ''count-'' + ($index + 1) ; { first: $first, last: $last }"
Aquí hay 2 formas diferentes de usar la directiva ng-class
. Los necesito a ambos, en el mismo elemento, pero eso no funciona.
Usando un objeto en ng-class
http://plnkr.co/edit/uZNK7I?p=preview
<div ng-repeat="item in [1, 2, 3, 4, 5]"
ng-class="{ first: $first, last: $last }">{{item}}</div>
correctamente resulta en
<div class="first">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div class="last">5</div>
Usando una expresión en ng-class
http://plnkr.co/edit/tp6lgR?p=preview
<div ng-repeat="item in [1, 2, 3, 4, 5]"
ng-class=" ''count-'' + ($index + 1) ">{{item}}</div>
correctamente resulta en
<div class="count-1">1</div>
<div class="count-2">2</div>
<div class="count-3">3</div>
<div class="count-4">4</div>
<div class="count-5">5</div>
Ahora, ¿qué hay de usarlos juntos?
Necesito nombres de clase dinámicos (como ''count-'' + n
), pero también necesito la sintaxis del objeto para varias clases.
No puedo usar 2 atributos de ng-class
( http://plnkr.co/edit/OLaYke?p=preview ), solo el primero funciona.
¿Alguna sugerencia?
Debe proporcionar a ngClass
una matriz que contenga tanto expresión como objeto:
<div ng-class="[''count-'' + ($index + 1), { first: $first, last: $last }]">
Nota: La solución sugerida en la respuesta aceptada (uso simultáneo de la directiva ngClass
e interpolación en el atributo de class
) es una mala práctica. Ver más detalles docs.angularjs.org/api/ng/directive/ngClass#known-issues y here .
No deberías usar ng-class
para la segunda, usa
<div class="count-{{$index + 1}}" ng-class="{ first: $first, last: $last }">
Si necesita mezclarlos juntos, solo vaya para concat cadenas:
ng-class="''count-'' + ($index+1) + ($first?'' first'':($last?'' last'':''''))"
O para una visión más clara:
ng-class="''count-'' + ($index+1) + ($first?'' first'':'''') + ($last?'' last'':'''')"
No se conocen ventajas para utilizar class="{{exp}}"
lugar de ng-class="exp"
, ya que ambos se actualizan cuando cambia el valor de exp
. Por el contrario, ir con el primero puede causar que la página se congele en algunos casos.