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

赞 (0)

相关推荐

  • Angular通过angular-cli来搭建web前端项目的方法

    Angular通过angular-cli来搭建web前端项目的方法

    准备前提:已经搭建好angular-cli环境,还未搭建好的请参见http://www.jb51.net/article/114254.htm 1 新建一个文件夹 该文件夹用来存放所有利用angular-cli搭建的web前端项目 2 启动命令窗口,并进入该文件夹 3 创建新项目 ng new 项目名称 注意:项目名称最好全部用字母 3.1 到文件夹中去查看项目是否成功创建 4 通过文本编辑器打开src文件夹下的index.xml文件 三少使用sublime打开的效果如下 4.1 代码详解 这就

  • Angularjs 事件指令详细整理

    Angularjs 事件指令详细整理 ngClick 适用标签:所有 触发条件:单击 #html <div ng-controller="LearnCtrl"> <div ng-click="click()">click me</div> <button ng-click="click()">click me</button> </div> #script angular.m

  • angular中实现li或者某个元素点击变色的两种方法

    本文介绍了angular中实现li或者某个元素点击变色的两种方法,分享给大家,希望对大家有帮助 先说一种最直接了当的不需要js控制. 方法一:直接在用ng-class就可以控制: <p ng-click="state=1;" ng-class="{active:state==1}">浮伤年华</p> <p ng-click="state=2;" ng-class="{active:state==2}&quo

  • Angularjs的键盘事件的绑定

    Angularjs的键盘事件的绑定 推荐button 方法一:ng内置指令 <button ng-click="login()" ng-keypress="todoSomething($event)" class="btn btn-success btn-lg" ng-disabled="loginForm.$invalid"> 登录 </button> 说明:在对应的控制器中的$scope上绑定一个t

  • Angular指令之restict匹配模式的详解

    Angular指令之restict匹配模式的详解 <body data-ng-app="myapp"> <runn2></runn2> <div data-runn2></div> <div class="runn2"></div> <!-- directive: runn2 --> <script> var app=angular.module("

  • AngularJS点击添加样式、点击变色设置的实例代码

    AngularJS点击添加样式、点击变色设置的实例代码

    本文介绍了AngularJS点击添加样式.点击变色设置的实例代码,分享给大家,具体如下: 首先解释需求是这样的,有个列表,当你点击哪一行时,哪一行背景变成灰色,在JQ中,大家都知道,这是非常容易的,加一个addClass就行了,那么AngularJS如何实现呢? 下面我们看代码部分 <!doctype html> <html ng-app="a2_11"> <head> <title>添加元素样式</title> <sc

  • 详解angularjs获取元素以及angular.element()用法

    本文介绍了详解angularjs获取元素以及angular.element()用法 ,分享给大家,具体如下: addClass()-为每个匹配的元素添加指定的样式类名 after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点 append()-在每个匹配元素里面的末尾处插入参数内容 attr() - 获取匹配的元素集合中的第一个元素的属性的值 bind() - 为一个元素绑定一个事件处理程序 children() - 获得匹配元素集合中每个元素的子元素,选择器选择性筛选

  • Angular中自定义Debounce Click指令防止重复点击

    在这篇文章中,我们将介绍使用 Angular Directive API 来创建自定义 debounce click 指令.该指令将处理在指定时间内多次点击事件,这有助于防止重复的操作. 对于我们的示例,我们希望在产生点击事件时,实现去抖动处理.接下来我们将介绍 Directive API,HostListener API 和 RxJS 中 debounceTime 操作符的相关知识.首先,我们需要创建 DebounceClickDirective 指令并将其注册到我们的 app.module.

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

    Angularjs的$http异步删除数据详解及实例 有人会说删除这东西有什么可讲的,写个删除的service,controller调用一下不就完了. 嗯...看起来是这样,但是具体实现起来真的有这么简单吗?首先有以下几个坑 怎么确定数据是否删除成功? 怎么同步视图的数据库的内容? 1.思路 1.实现方式一 删除数据库中对应的内容,然后将$scope中的对应的内容splice 2.实现方式二 删除数据库中对应的内容,然后再reload一下数据(也就是再调用一次查询方法,这种消耗可想而知,并且还要

  • JSON 数据详解及实例代码分析

     JSON 数据详解 一.json值的类型 1.简单值: 可以表示字符串,数值,布尔值,null不支持undefined(json的数值表示: 2 ) 2.对象: 一组有序的键值对,每个键值对的值可以是简单值,也可以是复杂数据类型.(json的字符串:"hello world").json字符串与JavaScript字符串的区别,json必须用双引号. 3.数组:一组有序值的列表,数组的值可以是简单值,也可以是复杂数据类型. 不支持变量,函数,以及对象实例 二.json对象与javas

  • python异步存储数据详解

    在Python中,数据存储方式分为同步存储和异步存储.同步写入速度比较慢,而爬虫速度比较快,有可能导致数据保存不完整,一部分数据没有入库.而异步可以将爬虫和写入数据库操作分开执行,互不影响,所以写入速度比较快,能够保证数据的完整性. 异步存储数据库大致看分为以下步骤: 1. 在settings中配置Mysql链接需要的参数(主机地址.用户账号.密码.需要操作的表名.编码格式等) 2. 自定义Pipeline,实现from_settings函数 3. from twisted.enterprise

  • angularJS Provider、factory、service详解及实例代码

    factory 用 Factory 就是创建一个对象,为它添加属性,然后把这个对象返回出来.你把 service 传进 controller 之后,在 controller 里这个对象里的属性就可以通过 factory 使用了. app.controller('myFactoryCtrl', function($scope, myFactory){ $scope.artist = myFactory.getArtis(); }); app.factory('myFactory', functio

  • MongoDB 导出导入备份恢复数据详解及实例

    数据库备份和数据恢复的重要性,我想大家都知道,这里就举例说明如何操作数据备份,数据恢复的实例: 创建测试数据 创建db:testdb,collection:user,插入10条记录 mongo MongoDB shell version: 3.0.2 connecting to: test > use testdb switched to db testdb > db.user.insert({id:1,name:"用户1"}); WriteResult({ "n

  • MySQL数据库使用mysqldump导出数据详解

    MySQL数据库使用mysqldump导出数据详解

    mysqldump是mysql用于转存储数据库的客户端程序.它主要产生一系列的SQL语句,可以封装到文件,该文件包含有所有重建您的数据库所需要的 SQL命令如CREATE DATABASE,CREATE TABLE,INSERT等等.可以用来实现轻量级的快速迁移或恢复数据库.是mysql数据库实现逻辑备份的一种方式. 在日常维护工作当中经常会需要对数据进行导出操作,而mysqldump是导出数据过程中使用非常频繁的一个工具:它自带的功能参数非常多,文章中会列举出一些常用的操作,在文章末尾会将所有

  • nodejs中的异步编程知识点详解

    简介 因为javascript默认情况下是单线程的,这意味着代码不能创建新的线程来并行执行.但是对于最开始在浏览器中运行的javascript来说,单线程的同步执行环境显然无法满足页面点击,鼠标移动这些响应用户的功能.于是浏览器实现了一组API,可以让javascript以回调的方式来异步响应页面的请求事件. 更进一步,nodejs引入了非阻塞的 I/O ,从而将异步的概念扩展到了文件访问.网络调用等. 今天,我们将会深入的探讨一下各种异步编程的优缺点和发展趋势. 同步异步和阻塞非阻塞 在讨论n

  • mysql触发器实时检测一条语句进行备份删除思路详解

    mysql触发器实时检测一条语句进行备份删除思路详解

    问题描述:用户有一个这样一个需求,在一张表里会不时出现 "违规" 字样的字段,需要在出现这个字段的时候,把整行的数据删掉.这是个采集任务,如果发现有"违规"字样的数据,会整点或者什么时间进行统一上报,也无法对源头进行控制让这种数据不生成. 现在需要实现以下需求: 1.实时检测这条数据的产生,发现后删除 2.在删除之前作备份这条数据 解决思路: 需要明确解决思路, 1.首先是如何实时探测删除?询问开发,这条数据的生成方式为insert,就可以做一个当表做插入的时候,然

  • Java Spring MVC获取请求数据详解操作

    Java Spring MVC获取请求数据详解操作

    目录 1. 获得请求参数 2. 获得基本类型参数 3. 获得POJO类型参数 4. 获得数组类型参数 5. 获得集合类型参数 6. 请求数据乱码问题 7. 参数绑定注解 @requestParam 8. 获得Restful风格的参数 9. 自定义类型转换器 1.定义转换器类实现Converter接口 2.在配置文件中声明转换器 3.在<annotation-driven>中引用转换器 10. 获得Servlet相关API 11. 获得请求头 11.1 @RequestHeader 11.2 @

  • SpringBoot采用AJAX实现异步发布帖子详解

    目录 1. AJAX 2. 功能描述 3. 开发流程 4. 引入AJAX依赖 5. Util 6. Mapper 7. Service 8. Controller 9. JavaScript 1. AJAX Asynchronous JavaScript and XML 异步的 JavaScript 与 XML 不是一门新技术,而是一个新术语 使用 AJAX,网页能够将增量更新呈现在页面上,而不需要刷新整个页面 虽然 X 代表 XML,但是目前 JSON 的使用比 XML 更加普遍 2. 功能描

随机推荐