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

I'm rendering data in a table using Angular and ng-repeat. What I would like to do is add an if condition to say if the value contained in ng-repeat is a certain word, set the background colour of that row to red. I think it might look something like this, but I'm not sure how to do this in Angular.

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

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

I was thinking of using ng-filter, although I dont wan't to actually filter the data, just set a variable based on a value.

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

Any ideas?

有任何想法吗？

4 个解决方案

#1

You could add an ng-class in the html to achieve this.

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

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

And then add with-background to css

然后添加with-background到css

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

If THING is a variable pointing to some other value, you don't have to use quotes and if it's meant to be a string, use it as 'THING'

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

Here's the official documentation of ngClass: https://docs.angularjs.org/api/ng/directive/ngClass

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

#2

You cann also use ng-style for this

你也可以使用ng-style

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

plunker

#3

You could do something like this below:

您可以在下面执行以下操作：

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

Or you could you use ng-class directive

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

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

#4

You can use ng-class directive

您可以使用ng-class指令

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

#1