Ang-if条件来自ng-repeat的值

Question

我使用Angular和ng-repeat在表格中渲染数据。我想要做的是添加一个if条件来说明ng-repeat中包含的值是否是某个单词，将该行的背景颜色设置为红色。我认为它可能看起来像这样，但我不确定如何在Angular中做到这一点。

if( {{field.value}} == THING){
var backgroundColour = red;
}

我在考虑使用ng-filter，虽然我不想实际过滤数据，只需根据值设置变量。

有什么想法吗？

Answer 1

您可以在html中添加ng-class来实现此目的。

<div ng-repeat"field in fields" ng-class="{'with-background': field.value == THING}">
    {{field.value}}
</div>

然后将with-background添加到css

.with-background {
    background-color: red;
}

如果THING是指向某个其他值的变量，则您不必使用引号，如果它是一个字符串，请将其用作'THING'

这里是ngClass的官方文档：https://docs.angularjs.org/api/ng/directive/ngClass

Answer 2

您可以执行以下操作：

<div ng-repeat="field in collections" 
         ng-if="field.value && field.value =='THING'">
      {{backgroundcolor}}
</div>

或者您可以使用ng-class指令

<div id="wrap" ng-class="{true: 'yourClassName'}[field.value]">

Answer 3

你也可以使用ng-style

<div ng-style="field.value == THING?{'background-color':'red'}:{}">
    Hello Plunker!
</div>

plunker

Answer 4

您可以使用ng-class指令

<tr ng-class="{'color-red': item.value > 0}" ng-repeat="item in vm.items">
    <td>{{ item.value }}>/td>
</tr>