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

Question

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

That's not the correct syntax to iterate over the key/value pairs of an object. Use an array, or use the right syntax: https://docs.angularjs.org/api/ng/directive/ngRepeat — JB Nizet, Nov 10 '16 at 12:13
Also in your template you are using `1-prob.p` instead of `prob1.p` and look at [this question](http://stackoverflow.com/questions/15127834/how-can-i-iterate-over-the-keys-value-in-ng-repeat-in-angular) to see how to iterate properly over an object also it's often recommended to convert the data to an array as you will see from the comments in the accepted answer. — GillesC, Nov 10 '16 at 12:16
there are a list of probability objects, like prob1, prob2, ;prob 3 and so on. And I'm iterating over those objects. Anyways , i'll check if it;s incorrect. Just tell me if the ng-class is used properly or not? — Subhash, Nov 10 '16 at 12:17
First convert your object with a loop thanks to Object.keys(probability) And make your ng-repeat on this table — qchap, Nov 10 '16 at 12:23

score 3 · Accepted Answer · answered Nov 10 '16 at 12:21

3

@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>

answered Nov 10 '16 at 12:21

Avinash Rathod

590
4
15

can You take a look at the edited question and tell me ? thank you – Subhash Nov 10 '16 at 12:26

Carlos Laspina · Answer 2 · 2016-11-10T12:54:40.130

1

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>

edited Nov 10 '16 at 12:54

answered Nov 10 '16 at 12:47

Carlos Laspina

2,013
4
27
44

score 0 · Answer 3 · answered Nov 10 '16 at 12:16

0

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

answered Nov 10 '16 at 12:16

Love-Kesh

777
7
17

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

3 Answers3