how to hide an image when server call succeed in angularjs and html

Question

hello i am making a demo of show and hide image on server calls,I have put a loader image on html page and put a gif file as a src,Now image is displaying,But now i want to hide it when i succeed the server call,my code is as below pls help me how to hide it,

html

<center><img src="images/plswait.gif" alt="what image shows" height="50" width="50" ng-show="show===5" ></center>

**js**


      app.controller('listingdetailController', function ($http, $scope, $compile, $filter, $sce) {

        var SearchTxt = 'cay';
        var url = encodeURI("http://www.yahoo.com");
         var page = gallery.getCurrentPage();
         var FkCategory = page.options.params;
         var lat='';
         var lng = '';
         var img = '';
         var title = '';
          var phone = '';
         var web  = '';
         var email = '';
         $scope.show5 = true;




//         console.log("===iside details======"+FkCategory);
         $scope.img = "http://caymanafterwork.netcluesdemo.com/cache/business/images/337_224/papagallo1438959641.jpg";

        $http({
            method: 'POST',
            url:  API_HOST+'/webservice/listingdetail',
            headers:
                    {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'caymanauth': caymanauth
                    },
            data: "&Catid=" + FkCategory + "&SearchTxt=" + SearchTxt,
            contentType: 'application/x-www-form-urlencoded'
        }).success(function (data)
        {
                $scope.show5 = true;

score 1 · Answer 1 · edited May 23 '17 at 12:29

1

Have you checked this question - AngularJS: ng-show / ng-hide. It offers snippets on how to hide the image.

You already have a success function. All you need to do write some code to set the value of variable which is bound to the relevant image. Do this in the success function.

edited May 23 '17 at 12:29

Community

1
1

answered Oct 03 '15 at 06:02

vvs

1,066
8
16

Hello sir thanks but its on click,and i want to hide it after successful api call – Jigar Makwana Oct 03 '15 at 06:10
Check that question carefully. It has snippets on setting the value of the directive ng-show / ng- hide. Your code already has a success function. Place the relevant snippet inside the success function it should work. – vvs Oct 03 '15 at 06:18
@JigarMakwana Looked at your latest code. You are on the right track two changes are required. change ng-show="show===5" to ng-show="show5" and in Success function change $scope.show5 = true to $scope.show5 = false – vvs Oct 03 '15 at 06:41

score 0 · Accepted Answer · answered Oct 03 '15 at 06:10

0

Why don't you simply set $scope.wait = false on success function of ajax call ?

answered Oct 03 '15 at 06:10

brute_force

1,141
7
12

i have done it,but its not working as i expecting..wait i have edit my code ..see it – Jigar Makwana Oct 03 '15 at 06:12
ng-show and ng-hide work on true and false. So set initally to true and not 1. Change this $scope.wait='1' to $scope.wait= true. – brute_force Oct 03 '15 at 06:14
Pls see my edit..i have changed it.but now it comes and then transition problem something like – Jigar Makwana Oct 03 '15 at 06:15
Make these changes : In html : ng-show="show===5" to ng-show="showImage" In JS : $scope.showImage = true; And on success : $scope.showImage = false; – brute_force Oct 03 '15 at 06:18

how to hide an image when server call succeed in angularjs and html

2 Answers2