Question

我是Ionic的新手。我需要帮助来隐藏侧面菜单中的元素。例如我的HTML标记：

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>

      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <ion-header-bar class="bar-stable">
      <h1 class="title">Menü</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item menu-close ng-click="login()">
          Login
        </ion-item>
        <div ng-show="myValue">
        <ion-item id="idsuchen"  menu-close href="#/app/suche">
          Suchen
        </ion-item>
        </div>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

我试图隐藏并显示离子项目。

我的控制器（javascript）代码：

angular.module('starter.controllers', ['ngCordova'])

.controller('AppCtrl', function($scope, $ionicModal, $timeout,$ionicSideMenuDelegate) {


  // Form data for the login modal
  $scope.loginData = {};

  // Create the login modal that we will use later
  $ionicModal.fromTemplateUrl('templates/login.html', {
    scope: $scope
  }).then(function(modal) {
    $scope.modal = modal;
  });

  // Triggered in the login modal to close it
  $scope.closeLogin = function() {
    $scope.modal.hide();

  };

  // This is the important part.
   $scope.logout = function() {   
       alert("logout");
        $ionicSideMenuDelegate.scope.myValue = false; // What i have add

   };


  // Perform the login action when the user submits the login form
  $scope.doLogin = function() {
    console.log('Doing login', $scope.loginData);

    $timeout(function() {
      $scope.closeLogin();
    }, 1000);
  };
})// Ende

我试着这样做。如果我点击按钮＆＃34;注销＆＃34;离子元素隐藏。但这不起作用。

我试过的语法：

$ionicSideMenuDelegate.scope.myValue = false;
$ionicSideMenuDelegate.scope.myValue = true;
$scope.myValue = true;
$scope.myValue = false;

它使用hide $('#idabmelden').hidde();与jQuery一起工作，但如果我隐藏了一次，我就无法再显示它。这真是太奇怪了。

提前致谢

Answer 1

上面的代码有点难以导航，但基本上你想要做类似的事情：

in html：

<a ng-click="toggleSomething()">ClickMe</a>
<div ng-show="isVisible"><h1>TOGGLE ME</h1></div>

JS：在init块中：

// initial state is visible
var initial_state = true;
$scope.isVisible = initial_state;

js - toggle / onclick功能

// toggle value 
$scope.toggleSomething = function(){
  $scope.isVisible = !$scope.isVisible;
  console.log('make sure toggleSomething() is firing*');
}

从侧面菜单中选择离子，隐藏和显示元素

1 个答案: