ng-if in ng-repeat angularjs

Question

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 ?

Please provide fiddle

Henrik Peinar
– Henrik Peinar

2014-06-05 08:57:49 +00:00
Commented Jun 5, 2014 at 8:57 — Henrik Peinar
– Henrik Peinar, Commented Jun 5, 2014 at 8:57
jsfiddle.net/bcKg6/3

zelocalhost
– zelocalhost

2014-06-05 09:02:32 +00:00
Commented Jun 5, 2014 at 9:02 — zelocalhost
– zelocalhost, Commented Jun 5, 2014 at 9:02

ssilas777 · Accepted Answer · 2014-06-05 09:16:53Z

3

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>

edited Jun 5, 2014 at 9:16

answered Jun 5, 2014 at 9:00

ssilas777

9,7704 gold badges48 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

R3tep Over a year ago

Why data-ng-class instead of ng-class ?

ssilas777 Over a year ago

That is optional, both are same , in order to make the template valid HTML, we can use data-* attributes.

Kos Prov Over a year ago

Why not combine into one td? The expression ca be something like:

ng-class="{'green' : alternate1.properties.statut_activite == 'yes', 'red' : alternate1.properties.statut_activite == 'no' }"

.

link Over a year ago

This solution will output the name two times. To display it only once: ng-class={ 'green': ...statut_activite == 'yes', 'red': ...statut_activite == 'no' }.

ssilas777 Over a year ago

ah, thats rit!, I didn't notice both are same values.

|

R3tep · Accepted Answer · 2014-06-05 09:26:20Z

2

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

edited Jun 5, 2014 at 9:26

answered Jun 5, 2014 at 9:07

R3tep

12.9k10 gold badges52 silver badges77 bronze badges

2 Comments

ssilas777 Over a year ago

Good that you found out 'actif' and 'inactif' should be used instead but I strongly believe ng-class should be the better option for this.

R3tep Over a year ago

Yes i know and i say this in the comment of your answere ;)

Collectives™ on Stack Overflow

ng-if in ng-repeat angularjs

2 Answers 2

7 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related