Hide ion-footer-bar in some pages

ionic-v1
1

Hi all,

I have following structue in app.

##Index.html

<!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-nav-back-button>Back</ion-nav-back-button>
</ion-nav-bar>

<ion-nav-view></ion-nav-view>

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

##Login.html

<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>
    <label class="item item-input">
      <span class="input-label">Password</span>
      <input type="password" ng-model="user.password">
    </label>
</div>
<div class="padding">
    <button class="button button-block button-custom" ng-click="login(user)">Sign-In</button>
</div>

##Mainpage.html

<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.

2

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

1 Like
3

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.

4

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ā€¦

5

Yes it is wrote ng-click=ā€˜footerIsHidden = !footerIsHiddenā€™ ā€¦

where should i write has-header=ā€œfalseā€ ?

6

you can set it to true like this :

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

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

8

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

9

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 ?

10

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ā€¦

11

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.

12

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ā€¦

13

Yes i know this method, from controller i can handle thisā€¦

Thank youā€¦

14

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

15

No. Itā€™s OKā€¦ atleast i have good knowdelge on this nowā€¦

Thank you