Angular if condition from value of ng-repeat

Question

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.

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.

Any ideas?

Chanthu · Accepted Answer · 2016-01-12 12:47:31Z

3

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

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

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

edited Jan 12, 2016 at 12:47

answered Jan 12, 2016 at 11:35

Chanthu

1,7941 gold badge15 silver badges23 bronze badges

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

3 Comments

A Dev Over a year ago

Thanks, so I'm pulling field.value from ng-repeat, so when I use it in my table I use {{field.value}}. To use your example should I use {{field.value}} == THING, or just field.value without the {{}}? Also, should THING be quoted?

Chanthu Over a year ago

you don't have to use {{}} and I don't know what thing is, if it's a variable, don't use ' ' and if it's meant to be a string, use the quotes.

A Dev Over a year ago

Thanks, I was using double quotes for the field.value == "THING" when I should have been using single quotes! I changed to field.value == 'THING' and It's working now!

AntiHeadshot · Accepted Answer · 2016-01-12 11:40:19Z

1

You cann also use ng-style for this

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

plunker

answered Jan 12, 2016 at 11:40

AntiHeadshot

1,1309 silver badges24 bronze badges

Comments

Thalaivar · Accepted Answer · 2016-01-12 11:41:06Z

1

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

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

edited Jan 12, 2016 at 11:41

answered Jan 12, 2016 at 11:33

Thalaivar

23.7k5 gold badges63 silver badges71 bronze badges

Comments

Mike Kor · Accepted Answer · 2016-01-12 11:37:15Z

0

You can use ng-class directive

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

answered Jan 12, 2016 at 11:37

Mike Kor

8765 silver badges14 bronze badges

Collectives™ on Stack Overflow

Angular if condition from value of ng-repeat

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related