在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通常的布爾值。而在你ng-if：

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

在你的控制器：

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; 
        } 
       }); 
     } 
});

和我一起@StanislavKvitash同意，這不是在同一個標籤使用ng-if和ng-controller一個好主意。最好再添加一個內部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」'在同一個標記中，我正在努力使答案更好，更有用。 –

@商業自殺我已更新我的問題，請檢查！ – query

在angularjs頁面中隱藏/顯示導航

回答

相關問題