宁泽林_NiZerin - 互联网技术博客

  • PHP
  • Go
  • Java
  • Rust
  • Python
  • 交流群
  • 关于我
  • 留言版
  1. 首页
  2. Angular
  3. 正文

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

2019年1月20日 2870点热度 0人点赞 0条评论

这篇文章主要介绍了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;
             });
           }
         });
       };

结语

感谢您的观看,如有不足之处,欢迎批评指正。

本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: angular
最后更新:2019年1月20日

NiZerin

博主已经躺平了,后面很少会更新博客。

打赏 点赞

文章评论

razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
取消回复

分类
  • Angular
  • CSS3
  • docker
  • Flutter
  • git
  • Go
  • H5
  • Java
  • JavaScript
  • Laravel
  • linux
  • Node.js
  • PHP
  • Python
  • React
  • redis
  • Vue.js
  • windows
  • WordPress
  • 交流
  • 小程序
  • 工具
  • 网站公告
标签聚合
javascript translations vue laravel wordpress go flutter php
友情链接
  • PHP函数字典
  • 宝塔运维特惠
  • 科学上网
  • 阿里云特惠

COPYRIGHT © 2021 nizer.in. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang