Question

我需要通过ng-repeat中的冠军值来定义不同的风格，我试试这个：

<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>

它不起作用（没有显示）

如何自动定义具有特定值的样式？

Answer 1

您可以为特定样式创建一个类，并使用ng-class，如下所示：

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>

Answer 2

您在测试中使用了错误的值

jsFiddle

将yes改为actif而将no改为inactif

示例：

<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：

ssilas777 的答案是执行此css类切换的最佳方法

ng-if在ng-repeat angularjs中

2 个答案: