CODEWITHSUNDEEP
javascriptangularjs
zelocalhost
zelocalhost

Reputation: 1183

ng-if in ng-repeat angularjs

I need to define different style by the value of a champ in ng-repeat, i try this :

<thead>
    <tr><th>#</th><th>Nom</th><th>Ville</th><th style="width: 50%;">Lignée</th></tr>
</thead>
<tbody>
    <tr ng-repeat="alternate1 in alternateViewText1.features | orderBy:'fiche.id*1'">
        <td>{{alternate1.fiche.id}}</td>
        <td ng-if="alternate1.properties.statut_activite == 'yes'" style="color: green;">{{alternate1.properties.nom}}</td>
        <td ng-if="alternate1.properties.statut_activite == 'no'" style="color: red;">{{alternate1.properties.nom}}</td>
        <td>{{alternate1.properties.ville}}</td>
        <td>{{alternate1.properties.lignee}}</td>
    </tr>
</tbody>

it's not working (nothing show)

how can i define automatically a style with a particular value ?

Upvotes: 2

Views: 559

Answers (2)

R3tep
R3tep

Reputation: 12854

You use the wrong value in your test

jsFiddle

Replace yes by actif and no by inactif

Example :

<td ng-if="alternate1.properties.statut_activite == 'actif'" style="color: green;">{{alternate1.properties.nom}}</td>
<td ng-if="alternate1.properties.statut_activite == 'inactif'" style="color: red;">{{alternate1.properties.nom}}</td>

PS:

The answer of ssilas777 is the best way to execute this switch of css class

Upvotes: 2

ssilas777
ssilas777

Reputation: 9804

You can create a class for particular style and use ng-class like this :

JS FIDDLE

css:

.green
 {
   color:green;
 }

.red
 {
   color:red;
 }

html:

<td data-ng-class="{'green' : alternate1.properties.statut_activite == 'actif', 'red': alternate1.properties.statut_activite == 'inactif'}">{{alternate1.properties.nom}}</td>

Upvotes: 3

Related Questions