CODEWITHSUNDEEP
javascripthtmlangularjsionic-framework
thenewOne1234567890
thenewOne1234567890

Reputation: 33

Ionic, hide and show element from side menu

I am new to Ionic. I need help to hide elements from side menu. For example my HTML markup:

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

I try to hide and show the ion-item.

My controller (javascript) code :

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

I tried to do something like this. If i click on the button "logout" the ion-element hide. But this is not working.

Syntax I tried : 

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

It works with jQuery by using hide $('#idabmelden').hidde(); but if I hide once I can't show it again. That is something really weird.

Thanks in advance

Upvotes: 0

Views: 4300

Answers (1)

errata
errata

Reputation: 26812

The code above is a little hard to navigate, but essentially you want to do something like:

in html:

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

js: in the init block:

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

js - toggle/onclick function

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

Upvotes: 1

Related Questions