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

Question

When my page loads I want to make an http call to the server to see if the user's login session is still valid. The client will send a session key with the current timestamp, and server will compare that timestamp to see if it is longer than its specified timeout period. The server will then return either true or false.

If the http call returns true and the login is valid I want to generate this html:

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

If the call returns false and the login has expired I want to show the following:

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

I am not sure how to do this with AngularJS.

New Dev · Accepted Answer · 2015-02-09 04:28:33Z

2

Angular has built-in directives for conditional rendering:

ng-show / ng-hide: conditionally set display: none style (with .ng-hide class)

ng-if / ng-switch: conditionally add/remove DOM elements.

Either approach would work here. For example:

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

isLoggedIn can be set whenever you complete the HTTP call.

answered Feb 9, 2015 at 4:28

New Dev

49.8k12 gold badges99 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

yangli-io · Accepted Answer · 2015-02-09 03:47:08Z

1

Create a controller

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

And then in your markup

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

EDIT: You can use ng-if/ng-switch instead of ng-show to optimise performance because this will actually remove the dom object instead of hiding it. However, in your case it shouldn't matter too much. Furthermore, keep in mind if you're using a version below 1.2, you may not get access to ng-if. ng-switch is also somewhat verbose.

edited Feb 9, 2015 at 3:47

answered Feb 9, 2015 at 3:32

yangli-io

17.4k8 gold badges43 silver badges50 bronze badges

1 Comment

dchhetri Over a year ago

I'd vote for ng-switch, or ng-if and avoid even generating the templates not used.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related