側面菜單中的離子隱藏和顯示元素

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

我試圖做這樣的事情。 如果我單擊“注銷”按鈕，則離子元素隱藏。 但這是行不通的。

我試過的語法：

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

它通過使用hide $('#idabmelden').hidde();與jQuery一起使用hide $('#idabmelden').hidde(); 但是如果我隱藏一次，我將無法再次顯示。 那真的很奇怪。

提前致謝

Answer 1

上面的代碼很難導航，但是從本質上講，您想要執行以下操作：

在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 value 
$scope.toggleSomething = function(){
  $scope.isVisible = !$scope.isVisible;
  console.log('make sure toggleSomething() is firing*');
}