javascript - ngclass - ¿Cómo asignar clases alternativas a filas en Angular JS?

ng-class angularjs

Question

Quiero asignar clases alternativas a filas en una tabla. Estoy usando ng-repeat en

<tr ng-repeat="event in events">

Quiero obtener un resultado como este:

<tr class="odd">...</tr>
<tr class="event">....</tr>

Lo he intentado (no funciona):

<tr ng-repeat="event in events" class="$index % 2 == 0? ''event'' : ''odd''">

No puedo conseguir que funcione. También parece que Angular está usando el atributo ''clase''. ¿Por qué está haciendo eso? ¿Puedo decirle a AngularJS que no use el atributo de clase para las evaluaciones internas?

Por favor ayuda. ¡Gracias!

Answer 1

Como @ganaraj establece ng-class-odd y ng-class-even son la forma correcta de hacerlo, pero para beneficio de los buscadores, su propuesta inicial no estaba muy lejos de funcionar en Angular> = 1.2.19.

Aquí hay un ejemplo estrechamente relacionado de algo que habría funcionado y que también funcionaría si colorea más que filas alternas (por ejemplo, cada 3 filas):

<div>
<style>
    .color0 {
        background-color: lightblue;
    }

    .color1 {
        background-color: lightyellow;
    }

    .color2 {
        background-color: lightgray;
    }
</style>


<div ng-repeat="result in results" ng-class="''color'' + ($index % 3)">
    <div>
        <p>{{result.myText}}</p>
    </div>
</div>

Answer 2

De los documentos angulares ..

Use ng-class-odd ng-class-even

<li ng-repeat="name in names">
  <span ng-class-odd="''odd''" ng-class-even="''even''">
    {{name}}
  </span>
</li>

Answer 3

Debería utilizar las directivas angulares ngClassEven y ngClassOdd para esto.

Eche un vistazo a la sección de documentación para saber cómo usarlos

http://docs.angularjs.org/api/ng.directive:ngClassEven

http://docs.angularjs.org/api/ng.directive:ngClassOdd

Espero que esto ayude.

Answer 4

También puede usar las directivas ng-class-odd y ng-class-even directamente dentro de la directiva ng-repeat .

<div class="cssOneProductRecord" 
   ng-repeat=''..'' 
   ng-class-odd="''cssProductOdd''" 
   ng-class-even="''cssProductEven''" >

Lo que nos da agradables clases alternativas para cada fila:

Este ejemplo se toma de la siguiente página, que también muestra cómo convertir datos JSON en una página amigable y receptiva de Master-View:

Vistas maestras con AngularJS