I'm working on an ionic and angularjs project. In one of the tabs in display a badge that contains a number and i want the badge to appear only if the figure is more than 0.
<ion-tab icon="ion-android-notifications" title="Notifications" href="#/tab/notifications" ng-app="starter" ng-controller="notifications_count" badge="total" badge-style="badge-assertive">
<ion-nav-view name="list-notifications"></ion-nav-view>
</ion-tab>
<ion-tab icon="ion-android-notifications" title="Notifications" href="#/tab/notifications" ng-app="starter" ng-controller="notifications_count" badge="total" ng-if="total>0" badge-style="badge-assertive">
<ion-nav-view name="list-notifications"></ion-nav-view>
</ion-tab>
Related
I am building an app using the Ionic framework tabbed view. Ionic already gives me tabs at the bottom but I also want two buttons at the top that changes the view. I cannot seem to get this to work. Specifically the one at the top right (see screenshot). Right now, when you click on it; it does nothing.
This is the tab interface they give me:
<ion-view id="page1">
<ion-tabs class="tabs-stable tabs-icon-bottom" id="tabsController-tabs1">
<ion-tab icon="ion-ios-photos" href="#/page1/index" id="tabsController-tab1">
<ion-nav-view name="tab1"></ion-nav-view>
</ion-tab>
<ion-tab icon="ion-camera" ng-if="timer === '0m'" ng-click="indexController.camera()">
<ion-nav-view name="tab3"></ion-nav-view>
</ion-tab>
<ion-tab title="{{timer}}" ng-if="timer !== '0m'" disabled="true" ng-if="true" ng-click="indexController.camera()">
<ion-nav-view name="tab3"></ion-nav-view>
</ion-tab>
<ion-tab icon="ion-android-list" href="#/page1/bestMoments" id="tabsController-tab2">
<ion-nav-view name="tab2"></ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-view>
In my routes.js I have this state for my new button:
.state('tabsController.myMoments', {
url: '/myMoments',
cache:false,
views: {
'tab4': {
templateUrl: 'myMoments/myMoments.html',
controller: 'MyMomentsController',
controllerAs: 'vm'
}
}
})
I have also, sort of 'hacked' the button. Its not actually a tabbed state, its just a button with a ng-click that sends you to the desired state. I put this code in my index.html:
<ion-nav-buttons side="right">
<div class="ion-person" ng-click="indexController.redirectMyMoments()"></div>
</ion-nav-buttons>
I don't understand where I am supposed to put 'tab4'. My assumption is that it goes with these rest of my tabs but no matter where I put it, it seems to mess up my other tabs and I don't want to make another ion-tab in there because I don't want it to be at the bottom.
I have also noticed that if I change the view name to 'tab3' it actually works so it is changing the state correctly, however, it highlights the third tab when you click on the top right view which is also bad.
Thanks for any help.
EDIT:
Plunker of my problem:
https://plnkr.co/edit/PTS9Jt?p=preview
Your last tab name is suppose to be tab4 instead of tab2 in your tab interface.
<ion-view id="page1">
<ion-tab icon="" href="#/page1/index" id="tabsController-tab2">
<ion-nav-view name="tab2"></ion-nav-view>
</ion-tab>
<ion-tab icon="ion-camera" ng-if="timer === '0m'" ng-click="indexController.camera()">
<ion-nav-view name="tab3"></ion-nav-view>
</ion-tab>
<ion-tab title="{{timer}}" ng-if="timer !== '0m'" disabled="true" ng-if="true" ng-click="indexController.camera()">
<ion-nav-view name="tab3"></ion-nav-view>
</ion-tab>
<ion-tab icon="ion-android-list" href="#/page1/bestMoments" id="tabsController-tab4">
<ion-nav-view name="tab4"></ion-nav-view>
</ion-tab>
Replace your code with this.
--------------------------UPDATE------------------------
Now, for Tab-3, You cannot have multiple tabs with same name. So what you can do in it is you can create a nested view in it. As in, you can have 2 views in it with different names.. one timer and one camera(OR ANYTHING ELSE YOU WANT). Here is the reference of multiple views in one tab. ionic multiple view states for one tab
Now each of your tab will have a unique name and a unique-associated id for them. So you can style it as you want it to look like.
all. I need a help about the mobile app. So I follow the 'todos list' tutorial of meteor angular 1, and build an simple mobile app with ionic framework. But I need to click the button or tabs twice in order to make it work. How to solve this twice clicking issue?
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="Home" icon="ion-home" ui-sref="tabs.home">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="About" icon="ion-ios-football" ui-sref="tabs.about">
<ion-nav-view name="about-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Contact" icon="ion-bag" ui-sref="tabs.contact">
<ion-nav-view name="contact-tab"></ion-nav-view>
</ion-tab>
</ion-tab>
</ion-tabs>
So these are basically the code from ionic, but I need to click a button twice like 'About' button to change the state to state 'about'. And I'm using angular 1, anybody have similar problems before?
Please refer to this issue. https://github.com/Urigo/meteor-ionic/issues/30
Removing the mobile-experience package should fix the problem.
From ionic docs:
Out of the box, Ionic automatically removes the 300ms delay in order
to make Ionic apps feel more “native” like. Resultingly, other
solutions such as fastclick and Angular’s ngTouch should not be
included, to avoid conflicts.
Remove mobile-experience and add again the mobile-status-bar and launch-screen.
I am using Ionic framework and want to create tabs without icons. I know I can achieve this with the CSS component tabs (http://ionicframework.com/docs/components/#tabs). Just wanted to check if it's possible with ion-tab directive also (http://ionicframework.com/docs/api/directive/ionTabs/). I tried with ion-tab directive by not providing the icon attribute. It creates the tab, but the placeholder of the icon is still there and the tabs don't look good with that empty space in place of the icon.
Try this.
<ion-content scroll="false">
<ion-tabs class="tabs-striped tabs-top">
<ion-tab title="Home" href="#">
<ion-nav-view name="home"></ion-nav-view>
</ion-tab>
<ion-tab title="Gallery" href="#">
<ion-nav-view name="gallery"></ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-content>
I have an Ionic Framework app that has 4 tabs. But I only want three tabs visible at any one time.
The first two tabs are always visible (call them Tab1 and Tab2). But the third tab needs to be one OR the other, but not both, between two different pieces of content (call them Tab 3a and Tab 3b). So you will have Tab1,Tab2,Tab3a or Tab1,Tab2,Tab3b.
For HTML, I came up with this:
<ion-tab title="Tab 1" href="#/tab/1" >
<ion-nav-view name="tab-timeline"></ion-nav-view>
</ion-tab>
<ion-tab title="Tab 2" href="#/tab/2" >
<ion-nav-view name="tab-2"></ion-nav-view>
</ion-tab>
<ion-tab title="Tab 3a" href="#/tab/3a" class="{{enableTab3a()}}">
<ion-nav-view name="tab-3a"></ion-nav-view>
</ion-tab>
<ion-tab title="Tab 3b" href="#/tab/3b" class="{{enableTab3b()}}">
<ion-nav-view name="tab-3b"></ion-nav-view>
</ion-tab>
Now I need a directive that will toggle the classes on Tab3a and Tab3b with "ng-show" and "ng-hide" based on a condition.
The condition that determines which tab to show is stored in a localStorage variable and accessed in a controller like this:
if(window,localStorage["tab3"] == 'a' {
$scope.tab3a = true;
$scope.tab3b = false;
} else {
$scope.tab3a = false;
$scope.tab3b = true;
}
How do I build a directive that triggers the classes based on the condition, and shows only the correct tab (Tab3a or Tab3b)?
Additional Info:
I have 5 controllers. Each tab has a controller, and tabs.html has a controller. This is why I think a directive is best suited for this, if the directive can react to changes in the localStorage variable
Use the ion-tab attribute hidden
<ion-tab title="Tab 3a" href="#/tab/3a" hidden="{{tab3a}}">
<ion-nav-view name="tab-3a"></ion-nav-view>
</ion-tab>
<ion-tab title="Tab 3b" href="#/tab/3b" hidden="{{!tab3a}}">
<ion-nav-view name="tab-3b"></ion-nav-view>
</ion-tab>
and in your controller
$scope.tab3a = window.localStorage["tab3"] == 'a';
I'm using the awesome framework Ionic to build my first application.
I want to be able to navigate between ion views without the need to use a nav bar.
I have page1 and Page2 I can navigate to the page 2 from the page 1 but I can get back to the page 1 from the page 2.
i'm using a simple button to naviate like :
<button class="button button-clear button-positive" ui-sref="tab.chats" >go</button>
here is my full code : PLUNKER CODE + DEMO
You're using your tabs wrong.
Your tabs must be wrapped in a tabs directive.
<ion-tabs class="tabs-item-hide">
<ion-tab title="dash" href="#/tab/dash">
<ion-nav-view name="tab-dash"></ion-nav-view>
</ion-tab>
<ion-tab title="chats" href="#/tab/chats">
<ion-nav-view name="tab-chats"></ion-nav-view>
</ion-tab>
</ion-tabs>
tabs-item-hide cause you want to hide them.
Plunker.