Angularjs的$http异步删除数据详解及实例

 更新时间:2017年07月27日 14:48:01   投稿:lqh  
这篇文章主要介绍了Angularjs的$http异步删除数据详解及实例的相关资料,这里提供实现思路及实现具体的方法,需要的朋友可以参考下

Angularjs的$http异步删除数据详解及实例

有人会说删除这东西有什么可讲的,写个删除的service,controller调用一下不就完了。

嗯...看起来是这样,但是具体实现起来真的有这么简单吗?首先有以下几个坑

怎么确定数据是否删除成功?

怎么同步视图的数据库的内容?

1.思路

1.实现方式一

删除数据库中对应的内容,然后将$scope中的对应的内容splice

2.实现方式二

删除数据库中对应的内容,然后再reload一下数据(也就是再调用一次查询方法,这种消耗可想而知,并且还要保证先删除数据再查询)

2.具体实现方式

删除数据的service:用异步,返回promise

service('deleteBlogService',//删除博客
    ['$rootScope',
      '$http',
      '$q',
      function ($rootScope, $http, $q) {
        var result = {};
        result.operate = function (blogId) {
          var deferred = $q.defer();
          $http({
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
            },
            url: $rootScope.$baseUrl + "/admin/blog/deleteBlogById",
            method: 'GET',
            dataType: 'json',
            params: {
              id: blogId
            }
          })
            .success(function (data) {
              deferred.resolve(data);
              console.log("删除成功!");
            })
            .error(function () {
              deferred.reject();
              alert("删除失败!")
            });
          return deferred.promise;
        };
        return result;
      }])

controller里面注意事项

要特别注意执行顺序:确保己经删除完成之后再去reload数据,不然会出来视图不更新             

 /**
         * 删除博客
         */
        $scope.deleteBlog = function (blogId) {
          var deletePromise = deleteBlogService.operate(blogId);
          deletePromise.then(function (data) {
            if (data.status == 200) {
              var promise = getBlogListService.operate($scope.currentPage);
              promise.then(function (data) {
                $scope.blogs = data.blogs;
                $scope.pageCount = $scope.blogs.totalPages;
              });
            }
          });
        };

以上就是Angularjs的$http异步删除数据的实例详解,如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

相关文章

  • AngularJS路由切换实现方法分析

    AngularJS路由切换实现方法分析

    这篇文章主要介绍了AngularJS路由切换实现方法,结合具体实例形式分析了AngularJS路由切换的实现步骤与相关操作技巧,需要的朋友可以参考下
    2017-03-03
  • Angular多选、全选、批量选择操作实例代码

    Angular多选、全选、批量选择操作实例代码

    列表批量选择是一个开发人员经常遇到的功能,列表批量选择的实现方式很多,这篇文章主要介绍了Angular多选、全选、批量选择实例代码,有兴趣的可以了解一下。
    2017-03-03
  • AngularJS实现ajax请求的方法

    AngularJS实现ajax请求的方法

    这篇文章主要介绍了AngularJS实现ajax请求的方法,结合实例形式分析了AngularJS实现ajax请求的前端界面、ajax交互及后台php处理技巧,需要的朋友可以参考下
    2016-11-11
  • Angular表单验证实例详解

    Angular表单验证实例详解

    这篇文章主要介绍了angular表单验证的相关知识,angular来验证可以定义样式的,下文通过代码给大家实例介绍下,需要的朋友可以参考下
    2016-10-10
  • AngularJs bootstrap详解及示例代码

    AngularJs bootstrap详解及示例代码

    本文主要讲解AngularJs bootstrap,这里整理了详细的资料及简单示例代码帮助大家学习或者参考,有需要的小伙伴看下
    2016-09-09
  • AngularJS修改model值时,显示内容不变的实例

    AngularJS修改model值时,显示内容不变的实例

    今天小编就为大家分享一篇AngularJS修改model值时,显示内容不变的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Angularjs为ng-click事件传递参数

    Angularjs为ng-click事件传递参数

    这篇文章主要介绍了Angularjs为ng-click事件传递参数的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-06-06
  • Angular4.0中引入laydate.js日期插件的方法教程

    Angular4.0中引入laydate.js日期插件的方法教程

    在AngularJs中我们会不可避免的使用第三方库,例如jquery插件库。下面这篇文章主要给大家介绍了关于Angular4.0中引入laydate.js日期插件的相关资料,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧。
    2017-12-12
  • AngularJS中使用three.js的实例详解

    AngularJS中使用three.js的实例详解

    这篇文章主要介绍了AngularJS中使用three.js的实例详解,我将之前自己做的demo放到了angularJS的一个component中,其实一开始是没有准备用框架的但是后面发现需要进行的双向绑定越来越多,后期表单数据的变化量也很大,最后还是选择用NG来做这些事情
    2017-07-07
  • angularJS模态框$modal实例代码

    angularJS模态框$modal实例代码

    本篇文章主要介绍了angularJS模态框$modal实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05

最新评论