Angular - Style Based On Condition

Question

I am trying to change the style of a background to green if a value is equal or greater than 16 and if a string contains the following word 'hdl'.

I done it with two separate conditions but it messed up my results and I don't think its the best way to do it.

So to reiterate, I'm trying to say if value.runners.length => 16 and value.marketName contains the string 'hdl' anywhere within it change background to #00FFBE if not don't add this background.

<a ng-repeat="(key, value) in events" class="list-group-item" ng-if="value.runners.length => '16' && value.marketName.includes(hdl)" ng-style="{ background:'#00FFBE' }" ng-click="showRunners(value.marketStartTime,value.marketName,value.runners,value.marketStartTime)" >
                    {{value.marketStartTime | date:'dd-MMMM-yyyy h:mma'}} - {{value.marketName}}
                    <any style="float: right;"> 
                        <i class="fa fa-user"></i> {{value.runners.length}}

                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <i class="fa fa-chevron-right"></i>
                    </any>
                </a>


                <a ng-repeat="(key, value) in events" class="list-group-item" ng-if="value.runners.length  <= '15'" ng-click="showRunners(value.marketStartTime,value.marketName,value.runners,value.marketStartTime)" >
                    {{value.marketStartTime | date:'dd-MMMM-yyyy h:mma'}} - {{value.marketName}}
                    <any style="float: right;"> 
                        <i class="fa fa-user"></i> {{value.runners.length}}

                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <i class="fa fa-chevron-right"></i>
                    </any>
                </a>

You should consider using a CSS class for this instead of an inline style. Then you can use `ng-class` which is a bit easier to work with. See [this question and its answers for that](http://stackoverflow.com/q/7792652/215552). — Heretic Monkey, Apr 27 '17 at 17:05

score 2 · Accepted Answer · answered Apr 27 '17 at 17:20

There are a couple of ways you can do it.

Using ng-style

<span ng-style="{background-color:(CONDITIONS FOR GREEN)?'green':'red'">Text</span>

CONDITIONS can be either inline or your can call a function and return true/false

Using ng-class

<span ng-class="{'my-green-css':CONDITIONS FOR GREEN,'my-red-css':CONDITIONS FOR RED}"> Text </span>

Where you have a CSS class for my-green-css and my-red-css. The CONDITIONS can either be inline, or you can call a function and return true/false.

score 0 · Answer 2 · answered Apr 27 '17 at 17:07

You can use a function and achieve this as below

<span ng-style="getStyle()">Sample Text</span>


$scope.getStyle=function(){
    if($scope.value.runners.length > = 16) {
        return {'background-color':'blue'}
    }else {
        return {'background-color':'red'}
    }
}

Jaron Thatcher · Answer 3 · 2017-04-27T21:12:36.133

0

What you could simply do is

In CSS file:

.myStyle {
    background:'#00FFBE'
}

In HTML:

<a ng-class="{myStyle: value.runners.length >= 16 && value.marketName.includes('hdl')}"></a>

edited Apr 27 '17 at 21:12

answered Apr 27 '17 at 17:11

Jaron Thatcher

814
2
9
24

Hi, looks promising but I am getting a syntax error using this, any idea? – BCLtd Apr 27 '17 at 18:01
Hey @BCLtd, I made an edit that you can try now if you'd like (I forgot to add curly braces – Jaron Thatcher Apr 27 '17 at 21:13

score 0 · Answer 4 · answered May 15 '20 at 16:21

0

<div [style.color]="hasError ? 'red' : 'black' ">

For Angular

answered May 15 '20 at 16:21

Prabhu Anand

530
4
10

Angular - Style Based On Condition

4 Answers4

Linked