隐藏Ionic上的按钮

Hide a button on Ionic

本文关键字：按钮 Ionic 隐藏      更新时间：2023-09-26

我正在使用ionic创建一个应用程序。

菜单上有一些按钮：消息、设置、帮助和返回。

我希望"后退"按钮不要出现在仪表板页面上。有人知道我是怎么做的吗？谢谢，

附言：我尝试使用离子导航返回按钮，但遇到了一些问题。

顶部菜单

这是菜单.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>

这是一个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>

谢谢！

如果只使用ng-hide="homepage"会怎样。在主页的控制器中设置$scope.homepage=true。对于其他页面，它将是未定义的，因此为false，因此不会被隐藏。

不知道这是不是最好的方法，但它对我有用。。！试试这个。！

将此添加到与侧菜单相关的控制器中：

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

另一种方法是..：在特定视图中添加您想要的任何按钮，然后从sidemmenu 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>

希望，它能帮助别人。！

相关文章：