如何更改侧面菜单中的离子为用户的loggedIn [英] How to change side menu in ionic for a loggedin user

问题描述

我要当一个用户登录改变侧面菜单内容。

示例1 - 用户没有登录

在未登录用户显示此侧面菜单。

示例2 ​​- 用户登录

正如你可以看到，有一对夫妇额外的菜单项。当用户登录这些才会显示。

在我的控制器：

<$p$p><$c$c>$http.get('http://127.0.0.1:8080/elodieService/consommateurs/'+$localStorage.idconsommateur, {PARAMS：{idconsommateur：$ localStorage.idconsommateur，字段：NOM，preNOM，格式为：JSON}}），然后（功能（结果）{。                的console.log（JSON.stringify（result.data））;
                $范围prenomconsommateurConnect = result.data preNOM。;

在视图中：

 ＆LT;离子标题栏类=扎稳＆GT;
                ＆LT;！prenomconsommateurConnectH1类=标题NG隐藏= NG控制器=accueilController＆GT;卓悦您好{{prenomconsommateurConnect}}＆LT; / H1＆GT;
                ＆LT; H1类=标题NG隐藏=prenomconsommateurConnectNG控制器=accueilController＆GT;卓悦你好链接＆LT; / H1＆GT;                ＆LT; /离子头吧＆GT;
 

但我发现总是这样的结果卓悦你好链接我能做些什么？请

我能做些什么？我应该使用 NG-如果， NG-节目或 NG-隐藏？
或者是有这种情况的另一个/更好的解决方案？

任何帮助是AP preciated。

解决方案

您可以把NG-IF或NG-展示和NG-隐藏..
我已经使用NG-如果..！

在菜单控制器：

  .controller（'AppCtrl'，函数（$范围，$ ionicModal，$超时，$ ionicSideMenuDelegate，$ HTTP）{$ http.get（'http://127.0.0.1:8080/elodieService/consommateurs/'+$localStorage.idconsommateur，{
  PARAMS：{idconsommateur：$ localStorage.idconsommateur，字段：NOM，preNOM，格式为：JSON}}）
  。然后（功能（结果）{
  的console.log（JSON.stringify（result.data））;
    如果（result.data。preNOM）{
      $范围prenomconsommateurConnect = result.data preNOM。;
    }其他{
      $范围prenomconsommateurConnect =。
    }
}）;$范围。$表（函数（）{
  返回$ ionicSideMenuDelegate.getOpenRatio（）;
}，功能（价值）{
  的console.log（值+值）;
  $ scope.getMenuProfile（）;
}）;$ scope.getMenuProfile =功能（）{
  如果（$范围。prenomconsommateurConnect ===）{
    $ scope.isLogin = FALSE;
  }其他{
    $ scope.isLogin =真;
  }
};
}
 

menu.html

 ＆LT;离子标题栏类=扎稳＆GT;
  ＆LT;！isLoginH1 NG-IF = CLASS =标题＆GT;登录PLZ＆LT; / H1＆GT;
  ＆LT; H1 NG-IF =isLogin级=标题＆GT; U的登录和LT; / H1＆GT;
＆LT; /离子头吧＆GT;
 

希望这有助于你。

I want to change content of side menu when a user is logged in.

Example 1 - user not logged in:

This side menu is shown when a user isn't logged in.

Example 2 - user is logged in:

As you can see, there are a couple of extra menu items. These are only shown when a user is logged in.

in my controller:

$http.get('http://127.0.0.1:8080/elodieService/consommateurs/'+$localStorage.idconsommateur, { params: { "idconsommateur":$localStorage.idconsommateur, fields: "nom,prenom",format:"json"} }).then(function(result) {

                console.log(JSON.stringify(result.data));
                $scope.prenomconsommateurConnect=result.data.prenom;

in the view :

 <ion-header-bar class="bar-stable" >
                <h1 class="title" ng-hide="!prenomconsommateurConnect" ng-controller="accueilController">Bonjour Hello {{prenomconsommateurConnect}}</h1>
                <h1 class="title" ng-hide="prenomconsommateurConnect" ng-controller="accueilController">Bonjour Hello link</h1>

                </ion-header-bar>

but i found always this result "bonjour hello link" what can i do please??

What can I do? Should I use ng-if, ng-show or ng-hide? Or is there another/better solution for this case?

Any help is appreciated.

解决方案

you can put ng-if OR ng-show and ng-hide.. i have used ng-if..!

in menu controller:

.controller('AppCtrl', function($scope, $ionicModal, $timeout,$ionicSideMenuDelegate,$http) {

$http.get('http://127.0.0.1:8080/elodieService/consommateurs/'+$localStorage.idconsommateur, {
  params: { "idconsommateur":$localStorage.idconsommateur, fields: "nom,prenom",format:"json"} })
  .then(function(result) {
  console.log(JSON.stringify(result.data));
    if(result.data.prenom) {
      $scope.prenomconsommateurConnect = result.data.prenom;
    }else{
      $scope.prenomconsommateurConnect = "";
    }
});

$scope.$watch(function () {
  return $ionicSideMenuDelegate.getOpenRatio();
}, function (value) {
  console.log("value " + value);
  $scope.getMenuProfile();
});

$scope.getMenuProfile = function () {
  if($scope.prenomconsommateurConnect === "" ){
    $scope.isLogin =false ;
  }else{
    $scope.isLogin =true ;
  }
};
}

menu.html

<ion-header-bar class="bar-stable">
  <h1 ng-if="!isLogin" class="title">Login plz</h1>
  <h1 ng-if="isLogin"  class="title">U are Login</h1>
</ion-header-bar>

hope this helped you.

这篇关于如何更改侧面菜单中的离子为用户的loggedIn的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！