Hide a button on Ionic

2
votes

I am creating an app using ionic.

I have some buttons on the menu: messages, Settings, Help and Back.

I would like the back button does not appear on the dashboard page. Anyone know how I do it? Thanks,

Ps .: I tried to use the ion-nav-back-button, but had some problems.

top menu

This is a menu.html

<ion-side-menus enable-menu-with-back-views="false" >
  <ion-side-menu-content>

    <ion-nav-bar class="bar-stable bar-balanced">

      <ion-nav-buttons side="left">
        <a href="#/app/dashboard" style="color: white;" class="button button-icon icon ion-android-arrow-back"></a> 
      </ion-nav-buttons> 

      <ion-nav-buttons side="right">
        <a href="#/app/profiles" style="color: white;" class="button button-icon icon ion-ios-people"></a> 
        <a href="#/app/config" style="color: white;" class="button button-icon icon ion-android-settings"></a> 
        <a href="#/app/help" style="color: white;" class="button button-icon icon ion-help-buoy"></a>
      </ion-nav-buttons>

    </ion-nav-bar>

   <ion-nav-view name="menuContent"></ion-nav-view>

  </ion-side-menu-content>
</ion-side-menus>

and this is a dashboard.html

<ion-view view-title="">
  <ion-content class="padding">
    <div class="list">

    <div class="row">
        <div class="col">
                <span>Type your message:</span>
              <div class="item-input item-stacked-label">
                <textarea type="text"></textarea>
              </div>
            </div>
        </div>

      <div class="row">
        <div class="col">
                <span>Choose the distance:</span>
            <div class="range range-balanced">
                <input type="range" name="distance" min="1" max="10000" value="1000">
              </div>
            </div>
        </div>

      <div class="row">
        <div class="col">
                <span>Anexar imagem:</span>
                    <button class="button button-balanced button-full">Selecionar</button>
            </div>
        </div>

      <div class="row">
        <div class="col">
                <a class="button button-icon icon ion-chevron-right float-right"></a>
            </div>
        </div>

       </div>
  </ion-content>
</ion-view>

Thanks!

2
javascriptangularjscordovaionic-frameworkionic
Please add a fiddle to see the issue - ppollono
Sorry, I tried to create a fiddle, but could not - Victor Mendes
you can create codepen easily. create codepen i'll try to help - user5570620

2 Answers

0
votes

What if you simply use ng-hide="homepage". Set $scope.homepage=true in the Homepage's controller. For other pages it will be undefined and therefore false so it won't be hidden.

0
votes

dont know this is best way or not but its working for me..!try this.!

add this in controller related to sidemenu:

$scope.$watch(function () {
        return $ionicSideMenuDelegate.getOpenRatio();
    }, function (value) {
        if (($state.$current.name == "app.dashboard")) {
            $scope.hideButton = true;
        }else{
            $scope.hideButton = false;
        }
    });

html :

 <a href="#/app/dashboard" ng-if="hideButton" style="color: white;" class="button button-icon icon ion-android-arrow-back"></a>

other way to do this is..:add whichever button u want in particular view and remove from sidemenu html.

<ion-view view-title="">
  <ion-nav-buttons side="right">
    <a href="#/app/profiles" style="color: white;" class="button button-icon icon ion-ios-people"></a> 
    <a href="#/app/config" style="color: white;" class="button button-icon icon ion-android-settings"></a> 
    <a href="#/app/help" style="color: white;" class="button button-icon icon ion-help-buoy"></a>
  </ion-nav-buttons>
   <ion-content class="padding">
   </ion-content>
</ion-view>

hope , it helps someone.!