侧面菜单中的离子隐藏和显示元素

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*');
}