Badge on icons of tabs and/or buttons


#1

Hey there! I have an app based on tab model, which retrieves content from the web with changing frequency. How can I, when this content is updated, make the relative tab flagged with a badge (like this) but on a tab?
The content is taken from a php page which returns a JSON array.


#2

Anyone can help me with this?


#3

Try using something like this:

<ion-tab title="Home" icon="ion-home" href="#/tab/home" badge="data.badgeCount" ng-controller="HomeCtrl" badge-style="badge-assertive"><ion-nav-view name="home-tab">

And then in your controller set the badgeCount like so:
$scope.data = { badgeCount : 2 };


#4

Ok, that, the HTML part, was clear. Thank you anyway. :)
I mean how the system behind the badge works? The JS part.


#5

Can you provide some come example? It’ll be much easier to understand and solve the problem :smiley:


#6

Yeah, sorry. I have this content being updated randomly, grabbed form a JSON, result of a php page. This JSON contains informations which are updated in my app. When I have a newer information in the JSON, I want my app display a badge in the tab or in a button relative to the proper section, exactly how (i.e.) whatsApp updates the chats with contacts. Was I clear this time? :D


#7

Ok clear to me. What whould i do :
-use php to set a var for each section telling you if the section was updated or not (0 if not 1 if it was updated)
-in my controller i would check how many var of all the section were updated or not.

Sample code made quicky:

for(var i=0; i < sections.updateData.length; i++)
{ if(sections.updateData[i] == 1){ $scope.badgeNumber += 1;}else{ nothing; }
}

I would do something like this. Obviously it may not be the best solution because i don’t know the json structure but I hope it helps you :smiley: