How to swap tabs in Ionic based on a condition - angularjs

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';

Related

How do I add a new state to ui-router with Ionic tab

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.

Setting up different tab navigation depending on view Ionic

I have a tricky problem (or at least I think its tricky). I have set up tabs in ionic by having a menu view with an associated abstract route.
menu.html:
<ion-nav-bar class="bar-custom">
<!-- Add Back Button Directive -->
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent">
<ion-tabs class="tabs-stable tabs-icon-top">
<ion-tab title="Dashboard" icon="ion-home" ui-sref="app.headlines">
<ion-nav-view name="dashboard"></ion-nav-view>
</ion-tab>
<ion-tab title="Portfolio" icon="ion-arrow-graph-up-right" ui-sref="app.stocks">
<ion-nav-view name="portfolio"></ion-nav-view>
</ion-tab>
<ion-tab title="Alerts" icon="ion-ios-bolt" ui-sref="app.alerts">
<ion-nav-view name="alerts"></ion-nav-view>
</ion-tab>
<ion-tab title="Saved" icon="ion-bookmark" ui-sref="app.saved-posts">
<ion-nav-view name="saved"></ion-nav-view>
</ion-tab>
<ion-tab title="Accounts" icon="ion-gear-a" ui-sref="app.accounts">
<ion-nav-view name="accounts"></ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-nav-view>
piece of routes.js:
angular.module('starter')
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'LoginController',
cache: false
})
The tabs work beautifully and just as I would expect. The next step is to change what those tab options are depending on what view I currently am on. So for example instead of Dashboard, Portfolio, Alerts, Saved, Accounts, that I have set as a default, I want options that will lead to foo, bar and foo2. What is the best approach to accomplish this? I have read a little on nested tabs but I don't think that is the way to go (seems to be for having tabs on top of tabs or something).

show badge number only if figure is more than 0

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>

Ionic: How to create tabs with ion-tabs without icons?

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>

Navigation between two ion-views without nav bar

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.

Resources