2016-02-05 118 views
0

表演元素我是新來的離子。我需要幫助來隱藏側面菜單中的元素。例如我的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> 

我試圖隱藏並顯示ion-item。

我控制器(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; 

它的工作原理與jQuery使用hide $('#idabmelden').hidde();,但如果我躲,一旦我不能再次顯示它。這真的很奇怪。

在此先感謝

回答

1

上面的代碼是有點難以定位,但基本上是你想要做的事,如:

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

JS:

在HTML

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

確定它的工作原理THX,但我有點secont問題。爲什麼我需要做$ scope.isVisible =!$ scope.isVisible;而不是這個$ scope.isVisible = false;?如果我想讓它顯示我需要做這個$ scope.isVisible =!$ scope.isVisible;阿甘?所以,我不能像布爾值那樣處理它。是否有可能問這個元素它是否屬實? – thenewOne1234567890

+0

您可以明確地指定變量。上面顯示的方法只是一個假設適合您的用例的示例。 – errata