Hide ion-footer-bar in some pages

Hi all,

I have following structue in app.


<!DOCTYPE html>
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/common.js"></script>
<ion-nav-bar class="bar-custom" align-title="center">


<ion-footer-bar align-title="center" class="bar-custom">
  <h1 class="footer-title">Title</h1>


<ion-view view-title="Login">
<div class="list">
    <label class="item item-input">
      <span class="input-label">Customer ID</span>
      <input type="text" ng-model="user.custID">
    <label class="item item-input">
      <span class="input-label">Password</span>
      <input type="password" ng-model="user.password">
<div class="padding">
    <button class="button button-block button-custom" ng-click="login(user)">Sign-In</button>


<ion-view hide-nav-bar="true">
This is my main page... i don't want header and footer in this page. I can hide header but not footer.

As you see above i have specified header and footer in Index.html… i want header and footer text to be overwrite with login.html page but i want to disappear header and footer in mainpage.html. I have used hide-nav-bar to hide the header but i am unable to hide footer…

Please give me some solution or guide to fulfill my requirement.

Thank you.

take a look at this http://codepen.io/drewrygh/pen/prlqC hope it works for you

1 Like

Thank you for your prompt reply…

Yes i know this… but this is onclick… how can i do this on page load or page call… is there any way just like hide-nav-bar=“true” ?

Thank you.

i don’t think they have that kind of class but please take a look at the code pen it is not onlick… ng-hide was use to hide the footer… and don’t forget to use has-header=“false” to your view…

Yes it is wrote ng-click=‘footerIsHidden = !footerIsHidden’

where should i write has-header=“false” ?

you can set it to true like this :

<div class="bar bar-footer bar-balanced" ng-hide='footerIsHidden = true'>
       <div class="title">Footer</div>

Where should i write above syntax ? is it in mainpage.html ? if yes then where ? after </ion-view> ?

maybe you should remove the footer in your index and place it in your login page and do the ng-hide…

You mean to say that i need to place footer in each page wherever i want … Is there any way where i can hide the footer wherever i don’t want ?

you can add footers to every pages and give it a ng-hide attribute if you don’t want it to be visible to that page…

I think this not right way… if i want to change footer text in future then i need to modify it one by one in every page… Ionic has to provide some flexible feature like header.

Thank you for your support.

there are so many ways for that if you don’t want to change 1 by 1 just hide your footer if it matches a page in the controller…

Yes i know this method, from controller i can handle this…

Thank you…

yeah sure, sorry for that I can’t continue to help you. I’m in the office right now

No. It’s OK… atleast i have good knowdelge on this now…

Thank you