AngularJS删除请求按钮

时间:2017-04-20 16:37:25

标签: javascript angularjs node.js rethinkdb

我创建了一个实时池应用程序,您可以在其中创建,查看和删除rethinkdb数据库中表池中的问题。

删除是问题。当我使用POSTMAN的DELETE请求时,它可以工作,表将被删除。但是当我点击Angular中的删除按钮时,它什么也没做。如何创建DELETE http请求?

这是我在数据库中使用的删除代码:

 deletePolls(pollData,callback) {
    async.waterfall([
      function(callback) {
        var pollObject = new db();
        pollObject.connectToDb(function(err,connection) {
          if(err) {
            return callback(true,"Error connecting to database");
          }
          callback(null,connection);
        });
      },
      function(connection,callback) {
        //THIS DELETES THE TABLE FROM THE DATABASE 
        rethinkdb.table('poll').delete().run(connection,function(err,result) {
          connection.close();
          if(err) {
            return callback(true,"Error happens while deleting polls");
          }
          callback(null,result);
        });
      }
    ],function(err,data) {
      callback(err === null ? false : true,data);
    });
  }

这是我的index.html中的按钮,它调用函数delete():

<md-button ng-submit="delete()">Delete the table</md-button> 

这是应该删除的功能

      $scope.delete = function() {
      $http.delete("/polls",data).success(function(response) {
      if(response.responseCode === 0) {
        console.log("Success");
        console.log("IvanUspeh");
        $scope.hiddenrows.push(index);
      } else {
        console.log("error");
      }
    });
  };

这是完整的app.js,角度适用的javascript:

 var app = angular.module('starterApp', ['ngMaterial','ngRoute','ngMessages']);

app.factory('socket',function(){
  var socket = io.connect('http://localhost:3000');
  return socket;
});

app.config(function($routeProvider){
      $routeProvider
          .when('/',{
                templateUrl: 'home.html'
          })
          .when('/create',{
                templateUrl: 'create.html'
          })
          .when('/view',{
                templateUrl: 'view.html'
          })
          .when('/delete',{ //IGNORE THIS, THIS JUST OPENS AN EMPTY HTML
                templateUrl: 'delete.html'
          })
          ;
});

app.controller('pollingController',function($scope,$mdDialog,$http,socket) {

  $scope.pollData = [];
  $scope.formData = {};
  $scope.voteData = {};
  $scope.hiddenrows = [];
  getPollData();
  function getPollData() {
    $http.get("/polls").success(function(response){
      $scope.pollData = response.data;
    });
  }
  $scope.submitPoll = function(ev) {
    var data = {
      "question" : $scope.formData.pollQuestion,
      "polls" : [{
        "option" : $scope.formData.pollOption1, "vote" : 0
      },{
        "option" : $scope.formData.pollOption2, "vote" : 0
      },{
        "option" : $scope.formData.pollOption3, "vote" : 0
      }]
    };
    var message = {"title" : "", "message" : ""};
    $http.post('/polls',data).success(function(response) {
      if(response.responseCode === 0) {
        message.title = "Uspeh !";
        message.message = "Anketa je uspešno napravljena.";
        data["id"] = response.data.generated_keys[0];
        $scope.pollData.push(data);
      } else {
        message.title = "Greška !";
        message.message = "Greška u toku pravljenja ankete.";
      }
      $mdDialog.show(
        $mdDialog.alert()
          .parent(angular.element(document.querySelector('#popupContainer')))
          .clickOutsideToClose(true)
          .title(message.title)
          .textContent(message.message)
          .ok('Got it!')
          .targetEvent(ev)
      );
    });
  }

  $scope.updateVote = function(index) {
    var data = {
      "id" : $scope.pollData[index].id,
      "option" : $scope.pollData[index].selected
    };
    $http.put("/polls",data).success(function(response) {
      if(response.responseCode === 0) {
        console.log("Success");
        $scope.hiddenrows.push(index);
      } else {
        console.log("error");
      }
    });
  }

  $scope.delete = function() {
      $http.delete("/polls",data).success(function(response) {
      if(response.responseCode === 0) {
        console.log("Success");
        console.log("IvanUspeh");
        $scope.hiddenrows.push(index);
      } else {
        console.log("error");
      }
    });
  };

  socket.on('changeFeed',function(data) {
    for(var pollCounter = 0 ;pollCounter < $scope.pollData.length; pollCounter++) {
      if($scope.pollData[pollCounter].id === data.id) {
        $scope.pollData[pollCounter].polls = data.polls;
        $scope.$apply();
      }
    }
  });
});

所以,当我按下带有函数delete()的按钮时,我希望它像在POSTMAN中一样删除表中的所有内容,就像http请求一样。我做错了什么?

1 个答案:

答案 0 :(得分:0)

这不是一个解决方案,而是关于如何调试

的建议

您仅从http调用中捕获成功,但不捕获错误。您可以编写如下所示的函数,以了解其失败的详细信息。

$scope.delete = function() {
      console.log("delete function called");
      $http.delete("/polls",data).success(function(response) {
      if(response.responseCode === 0) {
        console.log("Success");
        console.log("IvanUspeh");
        $scope.hiddenrows.push(index);
      } else {
        console.log("error");
      }
    })
    .error(function (data, status, header, config) {console.log(status)});
  };