Angularjs的$http異步刪除數(shù)據(jù)詳解及實(shí)例

更新時(shí)間：2017年07月27日 14:48:01 投稿：lqh

這篇文章主要介紹了Angularjs的$http異步刪除數(shù)據(jù)詳解及實(shí)例的相關(guān)資料,這里提供實(shí)現(xiàn)思路及實(shí)現(xiàn)具體的方法，需要的朋友可以參考下

Angularjs的$http異步刪除數(shù)據(jù)詳解及實(shí)例

有人會(huì)說刪除這東西有什么可講的，寫個(gè)刪除的service，controller調(diào)用一下不就完了。

嗯...看起來是這樣，但是具體實(shí)現(xiàn)起來真的有這么簡(jiǎn)單嗎？首先有以下幾個(gè)坑

怎么確定數(shù)據(jù)是否刪除成功？

怎么同步視圖的數(shù)據(jù)庫(kù)的內(nèi)容？

1.思路

1.實(shí)現(xiàn)方式一

刪除數(shù)據(jù)庫(kù)中對(duì)應(yīng)的內(nèi)容,然后將$scope中的對(duì)應(yīng)的內(nèi)容splice

2.實(shí)現(xiàn)方式二

刪除數(shù)據(jù)庫(kù)中對(duì)應(yīng)的內(nèi)容，然后再reload一下數(shù)據(jù)(也就是再調(diào)用一次查詢方法，這種消耗可想而知，并且還要保證先刪除數(shù)據(jù)再查詢)

2.具體實(shí)現(xiàn)方式

刪除數(shù)據(jù)的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里面注意事項(xiàng)

要特別注意執(zhí)行順序：確保己經(jīng)刪除完成之后再去reload數(shù)據(jù)，不然會(huì)出來視圖不更新

 /**
         * 刪除博客
         */
        $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異步刪除數(shù)據(jù)的實(shí)例詳解，如有疑問請(qǐng)留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

您可能感興趣的文章: