javascript - Ionic，从侧面菜单隐藏和显示元素

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>

我尝试隐藏和显示 ionic 项目。

我的 Controller (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

我尝试做这样的事情。如果我单击“注销”按钮， ionic 元素将隐藏。但这不起作用。

我尝试过的语法:

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

它通过使用 hide $('#idabmelden').hidde(); 与 jQuery 配合使用； 但如果我隐藏一次，我就无法再次显示它。这实在是太奇怪了。

提前致谢

Answer 1

上面的代码有点难以导航，但本质上你想做的事情如下:

在 html 中:

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

js: 在初始化 block 中:

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

js - 切换/onclick 函数

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