Angular JS Conditional Css Class not working

Question

Below the code gives output 15

<h1>{{model.ItemExpireAlertTime}}</h1>

however, when I tried to add conditional css class, it is not working for some reason.

<span timer interval="1000" countdown="item.ExpireTicksInSeconds">
   <span ng-class="minutes < model.ItemExpireAlertTime ? 'item-expire-alert' : '' " ng-show="minutes < 10">0</span>{{minutes}} dk 
   <span ng-show="seconds < 10">0</span>{{seconds}} sn
</span>

How can I add alert class when minutes is smaller than ItemExpireAlertTime ?

Why does ng-show have a conditional? sounds like something for the controller. Maybe try ng-if — user1752532
– user1752532, Commented Sep 29, 2015 at 9:46
@gerdi because there is a timer and countdown here, so if minutes are smaller than 10 min, first number will be 0 like 10:00 -> 09:59 -> 09:58 — Mehmet Eren Yener
– Mehmet Eren Yener, Commented Sep 29, 2015 at 9:49

muenchdo · Accepted Answer · 2015-09-29 09:51:16Z

2

You have your ng-class the wrong way around, try this:

<span timer interval="1000" countdown="item.ExpireTicksInSeconds">
  <span ng-class="{'item-expire-alert': minutes < model.ItemExpireAlertTime}" ng-show="minutes < 10">0</span>{{minutes}} dk 
  <span ng-show="seconds < 10">0</span>{{seconds}} sn
</span>

answered Sep 29, 2015 at 9:51

muenchdo

2,1811 gold badge17 silver badges30 bronze badges

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

Comments

Tushar · Accepted Answer · 2015-09-29 10:10:27Z

2

Try

ng-class="{'item-expire-alert': minutes < model.ItemExpireAlertTime}"

edited Sep 29, 2015 at 10:10

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

answered Sep 29, 2015 at 9:51

krishna

1527 bronze badges

Collectives™ on Stack Overflow

Angular JS Conditional Css Class not working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related