CODEWITHSUNDEEP
angularjsng-classangularjs-ng-class
Subhash
Subhash

Reputation: 383

use of operators( >,<,==,!=) in ng-class

I want to use Operators to check if value is greater or equal to other number or variable in ng-class, and then apply a style class accordingly. Basically i want to color the div based on their prob.

Is the usage of ng-class correct? It prints the value of

{{1-apStats.preMappedProbability.toFixed(3)}}

but the ng-class tag doesn't work. Any reasons?

 <div ng-class="(1-apStats.preMappedProbability.toFixed(3) >=0.5) ? 'yellowClass':'redClass'"> {{1-apStats.preMappedProbability.toFixed(3)}} </div>

What am I doing wrong.? Thank you

Upvotes: 2

Views: 5684

Answers (3)

Carlos Laspina
Carlos Laspina

Reputation: 2231

Syntax:

<element ng-class="class : conditionExpression"></element>

Modified your ng-class this way

<div ng-class="'yellowClass': 1-apStats.preMappedProbability.toFixed(3) >= 0.5; 'redClass' : anotherCondition">{{1-apStats.preMappedProbability.toFixed(3)}}</div>

Upvotes: 2

Avinash Rathod
Avinash Rathod

Reputation: 610

@Subhash

In ng-class directive, first you need to give class name then condition like following -

ng-class="{moreBtnGray : condition}"

In your case - you should use two ng-class and maintain condition accordingly. 

 <div ng-class="{yellowClass: condition1, redClass:condition2}">{{1-prob.p}} </div>

Upvotes: 4

Love-Kesh
Love-Kesh

Reputation: 812

<div ng-repeat="item in probability">
 <div ng-class="(1-item.prob.p)>=0.5 ? 'yellowClass':'redClass'">{{1-item.prob.p}} </div>

Upvotes: 1

Related Questions