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


Posted in Javascript onJuly 27, 2017

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异步删除数据的实例详解,如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
关于JavaScript的面向对象和继承有利新手学习
Jan 11 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
Mar 15 Javascript
IE6 hack for js 集锦
Sep 23 Javascript
JavaScript中的Web worker多线程API研究
Dec 06 Javascript
JavaScript数组和循环详解
Apr 27 Javascript
javaScript中slice函数用法实例分析
Jun 08 Javascript
简介AngularJS中使用factory和service的方法
Jun 17 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
Jun 19 Javascript
基于javascript实现简单的抽奖系统
Apr 15 Javascript
微信小程序之MaterialDesign--input组件详解
Feb 15 Javascript
详解Typescript 内置的模块导入兼容方式
May 31 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
Dec 20 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
Jul 27 #Javascript
Angularjs的键盘事件的绑定
Jul 27 #Javascript
Angularjs 事件指令详细整理
Jul 27 #Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
Jul 27 #Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
Jul 27 #Javascript
angular中实现li或者某个元素点击变色的两种方法
Jul 27 #Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
Jul 27 #Javascript
You might like
PHP+MariaDB数据库操作基本技巧备忘总结
2018/05/21 PHP
一个javascript参数的小问题
2008/03/02 Javascript
Jquery之Ajax运用 学习运用篇
2011/09/26 Javascript
jQuery Jcrop插件实现图片选取功能
2011/11/23 Javascript
JavaScript获取和设置CheckBox状态的简单方法
2013/07/05 Javascript
js获得页面的高度和宽度的方法
2014/02/23 Javascript
Javascript玩转继承(一)
2014/05/08 Javascript
NodeJS学习笔记之MongoDB模块
2015/01/13 NodeJs
Javascript基础教程之switch语句
2015/01/18 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
2016/06/20 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
2016/08/01 Javascript
angular使用md5,CryptoJS des加密的方法
2019/06/03 Javascript
浅析Vue 中的 render 函数
2020/02/28 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
2020/08/07 Javascript
vue之封装多个组件调用同一接口的案例
2020/08/11 Javascript
详解vue3.0 的 Composition API 的一种使用方法
2020/10/26 Javascript
[49:56]VG vs Optic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[52:52]完美世界DOTA2联赛PWL S3 LBZS vs access 第一场 12.10
2020/12/13 DOTA
基于ID3决策树算法的实现(Python版)
2017/05/31 Python
基于python神经卷积网络的人脸识别
2018/05/24 Python
python 用下标截取字符串的实例
2018/12/25 Python
TensorFlow dataset.shuffle、batch、repeat的使用详解
2020/01/21 Python
python统计字符的个数代码实例
2020/02/07 Python
Python CSS选择器爬取京东网商品信息过程解析
2020/06/01 Python
如何从csv文件构建Tensorflow的数据集
2020/09/21 Python
Petmate品牌官方网站:宠物用品
2018/11/25 全球购物
金额转换,阿拉伯数字的金额转换成中国传统的形式如:(¥1011)-> (一千零一拾一元整)输出
2015/05/29 面试题
师范生自荐信范文
2013/10/06 职场文书
职工趣味运动会方案
2014/02/10 职场文书
学生违反校规检讨书
2014/10/28 职场文书
2015教师年度考核评语
2015/03/25 职场文书
天那边观后感
2015/06/09 职场文书
写给同事的离职感言
2015/08/04 职场文书
mysql部分操作
2021/04/05 MySQL
SQL解决未能删除约束问题drop constraint
2022/05/30 SQL Server
Android开发EditText禁止输入监听及InputFilter字符过滤
2022/06/10 Java/Android