如何根据AngularJS中的http结果生成不同的html内容

How to generate different html content depending on http results in AngularJS?

本文关键字：内容 html 结果 何根 AngularJS 中的 http      更新时间：2023-09-26

当我的页面加载时，我想对服务器进行http调用，看看用户的登录会话是否仍然有效。客户端将发送一个带有当前时间戳的会话密钥，服务器将比较该时间戳以查看它是否长于指定的超时时间。然后服务器将返回true或false。

如果http调用返回true并且登录有效，我想生成这个html:

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

如果调用返回false并且登录已过期，我想显示以下内容：

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

我不知道如何使用AngularJS来做到这一点。

Angular有内置的条件渲染指令：

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>

无论何时完成HTTP调用，都可以设置isLoggedIn。

创建控制器

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 show来优化性能，因为这实际上会删除dom对象，而不是隐藏它。但是，在您的情况下，这应该不会太重要。此外，请记住，如果您使用的是1.2以下的版本，则可能无法访问ng-if。ng开关也有些冗长。

相关文章：