Show / Hide ion-items from ion-list by login/logout


#1

Hi,

I created a simple app with a side menu.
here is my side menu:

<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
	<h1 class="title">Left</h1>
</ion-header-bar>
<ion-content>
	<ion-list>
		<ion-item class="loginItem" ui-sref="app.login">
			Login
		</ion-item>
		<ion-item class="searchItem"  ui-sref="app.search">
			Search
		</ion-item>
		<ion-item class="browseItem"  ui-sref="app.browse">
			Browse
		</ion-item>
		<ion-item class="aboutItem"  ui-sref="app.about">
			About
		</ion-item>
		<ion-item class="logoutItem"  ui-sref="app.logout">
			Logout
		</ion-item>
	</ion-list>
</ion-content>

The login item shows the login page.

How can I :
1- Show only “login” and “about” items at start.
2- Display all items except “login” on login success
3- Display only “login” and “about” on logout success.

My login function looks like:

$scope.login = function(data) {
    AuthService.login(data.username, data.password).then(function(authenticated) {
      $state.go('app.search', {}, {reload: true});
      $scope.setCurrentUsername(data.username);
    }, function(err) {
      var alertPopup = $ionicPopup.alert({
        title: 'Login failed!',
        template: 'Please check your credentials!'
      });
    });

Can you help me please?