AngularJs : Show block if $http response is success

Question

I have 3 blocks that are showed based on a boolean.

<button ng-if="user.friendship == null" ng-click="requestFriendship(user.user.id)" class="button button-outline button-calm">
    Invite as friend
</button>
<button ng-if="user.friendship == false" ng-click="removeFriendship(user.user.id)" class="button button-calm">
    Friend request sent
</button>
<button ng-if="user.friendship == true" ng-click="removeFriendship(user.user.id)" class="button button-calm">
    Unfriend
</button>

Well at first i don't know if it is the best solution to structure it that way, so do not hesitate to correct me here if i'm wrong.

then i have my function :

$scope.requestFriendship = function(id) {

    $http.post(domain+'/api/friendship/request/'+id+'?access_token='+access_token.key).then(function(response){
        // If success change button
    }, function(error) {
        console.log(error);
    });

}

$scope.requestFriendship = function(id) {

    // function

}

So based on the result (my api is returning success or failed, so if success), I need to Hide the previous button and change it to its new state.

So how can i hide and show buttons based on the answer of the API.

There's no right or wrong answer. You could do it with 1, 2, or 3 buttons — Wayne Ellery
– Wayne Ellery, Commented May 21, 2015 at 8:45
Sure, so in that case how could i show and hide buttons if response is success? Actually i wonder if i should use ng-show instead of ng-if. — Brieuc
– Brieuc, Commented May 21, 2015 at 8:48
ngShow is very similar to ngIf, the difference being that the element will be added/removed from the dom with ngIf and just shown/hidden for ngShow — Wayne Ellery
– Wayne Ellery, Commented May 21, 2015 at 8:53
Okay that is perfectly working. I gotta think AngularJS and stop thinking JQuery haha, notion of scope if pretty new to me. If you want to set it as an answer i'll be glad to validate it. — Brieuc
– Brieuc, Commented May 21, 2015 at 8:57

Wayne Ellery · Accepted Answer · 2015-05-21 09:00:31Z

1

You would set $scope.user.friendship to the correct value to show and hide the relevant button:

This will show the unfriend button:

$scope.user.friendship = true;

This will show the Friend request sent button:

$scope.user.friendship = false;

answered May 21, 2015 at 9:00

Wayne Ellery

7,9581 gold badge30 silver badges45 bronze badges

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

Collectives™ on Stack Overflow

AngularJs : Show block if $http response is success

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related