I am using Ionic/Angular and also animate.css to give some fancy touches.
At first I was using this type of tabs and everything was working properly
<a class="tab-item has-badge" href="#/app/bet-slip">
<span class="badge badge-assertive animated"
ng-class="picksCount?'rubberBand':'bounceIn'">{{betSlipCount}}</span>
<i class="icon ion-code-download"></i>
</a>
but the requirements says that I need to use <ion-tabs></ion-tabs>
and thats what I am trying.
In the first type of tabs above you can see that there is a <span>
that actually holds a badge with an ng-class
and at the end {{betSlipCount}}
, that ng-class
it is been applied every time that {{betSlipCount}}
which is an integer changes thru a boolean named picksCount
. now I am using the type of tabs I mentioned before and now I have:
<ion-tab title="BetSlip"
class="animated"
ng-class="picksCount?'rubberBand':'bounceIn'"
badge="betSlipCount"
badge-style="badge-assertive">
<ion-nav-view name="about-tab"></ion-nav-view>
</ion-tab>
as you can see some stuff change there, the badege now is inside the same first tap I do not know how to apply the ng-class
correctly in this case, and I need the same behavior, I need that class applied to the badge every time that the betSlipCount
changes.