CODEWITHSUNDEEP
angularjs
BCLtd
BCLtd

Reputation: 1461

Angular - Style Based On Condition

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>

Upvotes: 0

Views: 1687

Answers (4)

Prabhu Anand
Prabhu Anand

Reputation: 530

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

For Angular

Upvotes: 0

Jaron Thatcher
Jaron Thatcher

Reputation: 824

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>

Upvotes: 0

Scott
Scott

Reputation: 1690

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.

Upvotes: 2

Aravind
Aravind

Reputation: 41533

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

Upvotes: 0

Related Questions