如何根據AngularJS中的http結果生成不同的html內容？

Question

加載我的頁面時我想對服務器進行http調用，以查看用戶的登錄會話是否仍然有效。客戶端將發送帶有當前時間戳的會話密鑰，並且服務器將比較該時間戳以查看它是否超過其指定的超時時間段。服務器將返回true或false。

如果HTTP調用返回true，登錄是否有效我要生成這個網站：如果返回false，並且登錄已過期

<li><a href='#logout'>logout</a></li> 

我想說明以下幾點：

<li><a href='#login'>login</a></li> 

我不知道如何與AngularJS做到這一點。

Answer 1

角有內置的指令爲條件呈現：

ng-show/ng-hide：有條件地設置display: none風格（與.ng-hide類）

ng-if/ng-switch：有條件地添加/刪除DOM元素。

兩種方法都可以在這裏使用。例如：

<li ng-switch="isLoggedIn"> 
    <a ng-switch-when="true" href='#logout'>logout</a> 
    <a ng-switch-when="false" href='#login'>login</a> 
</li> 

isLoggedIn可以在您完成HTTP調用時設置。

Answer 2

創建一個控制器

angular.module('yourModuleName').controller('sessionCtrl', ['$scope', '$http', function($scope, $http){ 
    $http.get('url') 
     .success(function(data){ 
      $scope.loggedIn = data ? '#logout' : '#login'; //true or false 
     }) 
}]); 

然後在您的標記

<div ng-controller="sessionCtrl"> 
    <li ng-show="loggedIn"><a href='{{loggedIn}}'>logout</a></li> 
</div> 

編輯：您可以使用NG-IF/NG-開關代替NG-顯示優化，因爲這樣的表現實際上會刪除dom對象而不是隱藏它。然而，在你的情況下，它不應該太重要。此外，請記住，如果您使用的版本低於1.2，您可能無法訪問ng-if。 ng-switch也有些冗長。