javascript - directivas - ng-if ejemplos

AngularJS-¿Cómo agregar múltiples directivas de clase ng?

Question

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?

Answer 1

Creo que puedes separar los atributos ng-class ;

tratar:

ng-class=" ''count-'' + ($index + 1) ; { first: $first, last: $last }"

Answer 2

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 .

Answer 3

No deberías usar ng-class para la segunda, usa

<div class="count-{{$index + 1}}" ng-class="{ first: $first, last: $last }">

Answer 4

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.