How to change CSS class after Ajax request in Angular

Question

I can't figure out what I'm supposed to use in the following situation:

The template list a bunch of photos
Each photo element has a ng-click event that marks the photo as selected and sends an Ajax request to save the photo
When the save happens, I want to update the class of the photo element to show it as selected

I have a call tie to my ng-class that works when the page loads, but it is called too early when the user clicks. It should be called after the save.

How do I do this?

Thanks a lot.

you could modify the ng-class variable when the ajax is completed — Ajay Singh Beniwal
– Ajay Singh Beniwal, Commented May 21, 2013 at 15:58
Thanks. Do you have an example. I just tried something but it didn't work. — user1732055
– user1732055, Commented May 21, 2013 at 16:18

Maxim Shoustin · Accepted Answer · 2013-05-21 16:17:53Z

2

You can write something like:

<a ng-click="uploadImage('id')">
 <i ng-class="{'image-not-uploaded': !sendImage, 'image-uploaded': sendImage}"></i>
</a>

In JS

...
$scope.sendImage= false; 

 ajax_post.uploadFile_init($scope.uploadedFile)
    .then(function (result) {
        if(result.status == 200){
            $scope.sendImage= true;
        }                 
    }, 
    function (error) {
        alert(error.message);               
    });

Here, you change class according to $scope.sendImage state.

I used some factory for upload file but you can change it to Image.

angular.module('FeederLiteApp', []).factory('ajax_post', ['$http',  function(_http) {   
return{              
    uploadFile_init: function(uploadedFile){
        var fd = new FormData();
        fd.append("uploadedFile", uploadedFile);
        var upload_promise =  _http.post("src/php/data.ajax.php",
            fd,
            {
                headers:{
                    'Content-Type':undefined
                },
                transformRequest:angular.identity
            });

        return upload_promise;
    }       
  }   
}]);

answered May 21, 2013 at 16:17

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

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

2 Comments

user1732055 Over a year ago

Thanks. I'll try something around that.

user1732055 Over a year ago

For some reason my ng-class call doesn't output anything and remains as a HTML attribute code <div ng-repeat="photo in currentAlbumPhotos" class="ng-scope"> <div ng-click="selectPhoto(photo)" ng-class="{'selected': photoSelected[photo.id]}"> <img src="photos-a.xx.fbcdn.net/hphotos-ash3/…" width="180"> </div> </div> code

Collectives™ on Stack Overflow

How to change CSS class after Ajax request in Angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related