angularjsページでのナビゲーションの非表示/表示

ログインページにナビゲーションが表示されています。ログインページのナビゲーションを非表示にします。ユーザーのログイン後、フラグ値を1に設定してダッシュボードページにリダイレクトするようにします。ダッシュボードページではナビゲーションが表示されます。しかし、問題は、フラグ値をナビゲーションメニュー表示されなくなりました。フラグの値は効果がないようです。angularjsページでのナビゲーションの非表示/表示

私の目標はログインページからナビゲーションメニューを隠すことですが、これを他のすべてのページに表示することです。問題を解決する方法は？正しい方向へ進むか、これを達成するためのよりよい方法がありますか？

のIndex.htm

<body ng-app="myApp"> 
    <div ng-controller="logCtrl"> 
    <div ng-if="flag==1"> 
     <p><a href="#/">Main</a></p> 
     <a href="#login">Login</a> 
     <a href="#dashboard">dashborad</a> 
    </div> 
    </div> 

    <div ng-view></div> 
    <script> 
    var app = angular.module("myApp", ["ngRoute"]); 
    app.config(function($routeProvider) { 
     $routeProvider 
     .when("/", { 
      templateUrl : "login.htm" 
     }) 
     .when("/login", { 
      templateUrl : "login.htm", 
      controller : "logCtrl" 
     }) 
     .when("/dashborad", { 
      templateUrl : "dashborad.htm", 
      controller : "dashboradCtrl" 
     }); 
    }); 


    app.controller('logCtrl', function ($scope,$location,$http) { 
     $scope.login = function() { 
     var request = $http({ 
      method: "post", 
      url: "ajax/login.php", 
      data: { 
      username: $scope.username, 
      password: $scope.password 
      }, 
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' } 
     }); 

     request.success(function (data) { 
      if(data == "1") { 
      $scope.flag=1; 
      $location.path('/dashboard'); 
      } else { 
      $scope.flag=0; 
      } 
     }); 
     } 
    }); 

    </script> 
</body>

<div class="panel panel-body login-form">       
    <div class="form-group has-feedback has-feedback-left"> 
    <input type="text" class="form-control" ng-model="username" placeholder="Username"> 
    </div> 
    <div class="form-control-feedback"> 
     <i class="icon-user text-muted"></i> 
    </div> 
</div> 

<div class="form-group has-feedback has-feedback-left"> 
    <input type="password" class="form-control" ng-model="password" placeholder="Password"> 
    <div class="form-control-feedback"> 
    <i class="icon-lock2 text-muted"></i> 
    </div> 
</div> 
<span>{{responseMessage }}{{flag}}</span>        
    <div class="form-group"> 
    <button type="submit" class="btn btn-primary btn-block" ng-click="login()">Sign in</button> 
    </div> 
</div>

出典

2017-06-08 query

'$ scope.flag = 1;'が実行されていますか？ビューに '{{flag}}'を追加し、値 '1'が正しく設定されているかどうかを確認してください。 '$ scope.login（）'はどこで呼びますか？ – lin

数字やオブジェクトではなく文字列を受け取っていることを確認するには、データ=== "1"を使用します。 –

@ andrey.shedkoこれは単に間違っています。明示的な型の比較はここでは必要ありません。彼はまた、文字列の値を設定していない、彼は番号を設定します。 – lin

だけアドバイス： あなたがより良い$scope.flag = trueか$scope.flag = falseのようなそのための通常のブール値を使用します。

<div ng-controller="logCtrl" ng-if="flag">

あなたのコントローラで：ng-ifあなたに、私は@StanislavKvitashに同意

app.controller('logCtrl', function ($scope,$http) { 
     $scope.login = function() { 
       var request = $http({ 
        method: "post", 
        url: "ajax/login.php", 
        data: { 
         username: $scope.username, 
         password: $scope.password 
        }, 
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' } 
       }); 

       request.success(function (data) { 
        if(data == "1"){ 
         $scope.flag = true; 
        } 
        else { 
         $scope.flag = false; 
        } 
       }); 
     } 
});

そして、それは同じタグにng-ifとng-controllerを使用するのは良い考えではありません。もう1つ内側のdivを追加し、ng-ifに設定してください。したがって、このHTMLを使用しよう：

<body ng-app="myApp"> 
    <div ng-controller="logCtrl"> 
     <div ng-if="flag"> 
      <p><a href="#/">Main</a></p> 

      <a href="#login">Red</a> 
      <a href="#dashboard">Green</a> 
     </div> 
    </div> 

    <div ng-view></div> 
    ... 
</body>

だけ/loginのためのナビゲーションを非表示にする場合

「私の目標は、ログインページからナビゲーションメニューを隠すが、他のすべてのページにこれを示すことである」、あなたlogCtrlの先頭にフラグ値を単純にハードコードすることができます。$scope.flag = 0と/loginの場合はナビゲーションが非表示になります（また、if/elseの文は必要ありません）。

出典

2017-06-08 14:18:29

どうしますか？これはユーザーの質問を解決しますか？ 'string'、' number'、 'object'、' array'、 'boolean'をまったく比較しても問題ありません。 – lin

ブール値の使用について - 単なるアドバイスです。 @StanislavKvitashが述べたように、問題は同じタグの 'ng-controller =" logCtrl "と' ng-if = "flag" 'にあるはずです。私は答えをより良く、より有用にするよう努めています。 –

@CommercialSuicide私は親切にチェックして私の質問を更新しました！ – query

angularjsページでのナビゲーションの非表示/表示

答えて

関連する問題