angularjs - 如何在Angular中的Ajax请求后更改CSS类

Question

我不知道在以下情况下应该使用什么：

• 模板列出了一堆照片
• 每个照片元素都有一个 ng-click 事件，该事件将照片标记为选中并发送 Ajax 请求以保存照片
• 保存时，我想更新照片元素的类以将其显示为选中

我有一个调用绑定到我的 ng-class，它在页面加载时工作，但是当用户点击时它被调用得太早。它应该在保存后调用。

我该怎么做呢？

非常感谢。

Answer 1

您可以编写如下内容：

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

在 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);               
    }); 

在这里，您根据$scope.sendImage状态更改课程。

我使用了一些factory上传文件，但您可以将其更改为 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;
    }       
  }   
}]);