CODEWITHSUNDEEP
javascripthtmlangularjs
SilentDev
SilentDev

Reputation: 22777

AngularJS - how to not display HTML element until the variable it is binded to is loaded in the JS?

This is my HTML:

<button type="button" class="btn btn-primary" ng-hide="ctrl.userProfile.following">Follow</button>
<button type="button" class="btn btn-primary" ng-show="ctrl.userProfile.following">Unfollow</button>

So basically, I want to hide the "Follow" button and show the "Unfollow" button if ctrl.userProfile.following is true, and vise-versa.

This is my back-end:

self.userProfile = {};

function fetchUserProfile() {
    $http.get('/users/' + username)
    .then(function(response) {
        self.userProfile = response.data;
    }, function(response) {
        self.cerrorMessages = BaseService.accessErrors(response.data);
    });
};

fetchUserProfile();

So I get the userProfile and then update self.userProfile with the watching variable (this occurs when I do self.userProfile = response.data. With that said, is there a way for me to tell HTML to not display the buttons until self.userProfile is filled with watching variable?

Upvotes: 0

Views: 94

Answers (2)

georgeawg
georgeawg

Reputation: 48968

Create a userProfile.ready flag and use that to control the showing of the Follow and Unfollow buttons.

HTML

<div ng-show="ctrl.userProfile.ready">
    <button type="button" ng-hide="ctrl.userProfile.following">Follow</button>
    <button type="button" ng-show="ctrl.userProfile.following">Unfollow</button>
</div>

JS

self.userProfile = {};
self.userProfile.ready = false;

function fetchUserProfile() {
    self.userProfile.ready = false;
    $http.get('/users/' + username)
      .then(function(response) {
         self.userProfile = response.data;
         self.userProfile.ready = true;
      }, function(error) {
         self.cerrorMessages = BaseService.accessErrors(error.data);
      });
};

fetchUserProfile();

Upvotes: 1

iamcutler
iamcutler

Reputation: 41

There are a few ways of doing this. Here is one:

If you start with an empty object, and are waiting for the promise to resolve, you can set a scope variable that checks the length of the object.

e.g. self.userProfileLength = Object.keys(self.userProfile).length;

And in the view, do: ng-if="ctrl.userProfileLength" (Note: Or use ng-show if you want to keep the element in the DOM)

Object.keys returns the keys from the object in an array. Anything over a length of 0 is a truthy value so it will pass the ng-if condition.

Upvotes: 1

Related Questions