MEAN删除。只工作一次

时间:2015-08-20 11:35:32

标签: angularjs node.js mean-stack

我有一个非常简单的MEAN堆栈应用程序。我差不多完成它但是我有一个小虫子。

当我去删除一行时,它会删除它。但是,当我尝试删除第二个或第三个等时,它只会从范围中删除它。我必须首先刷新删除才能再次在服务器端工作。

下面的角度代码

  $scope.deleteNote = function(city){


     $http({
    method: 'DELETE',
    url: '/city',
    data: city.city,
    headers:{"Content-Type": "application/json;charset=utf-8"} });


    var index = $scope.cities.indexOf(city.city);
    var cityindex = city.city;



    console.log(cityindex + " at " + index);
    console.log(cityindex);
    console.log($scope);
    $scope.cities.splice(index, 1);

};

节点侧代码

app.delete('/city', function(req,res){

CityDb.findOneAndRemove({city: req.body.city}, function(err, results){
    if (err) throw err;

});

});

最近怎么回事?

heroku上的网站 https://serene-springs-2108.herokuapp.com/#/

github获取完整代码

https://github.com/jminterwebs/STBExpress/tree/MEAN/Public/javascript

1 个答案:

答案 0 :(得分:2)

我无法重现您在应用中遇到的错误(也许是因为很多人现在正在从您的实际网站删除内容!),但您的服务器没有响应您的删除请求,这会导致错误控制台也意味着您的角度前端可能会失去同步。

首先,在您的快递应用中回复此请求:

app.delete('/city', function(req,res){

  CityDb.findOneAndRemove({city: req.body.city}, function(err, results){

    if (err){
      res.status(500).send({error: err});
      // Assume you are going to catch this somewhere...
      throw err;
    }

    else
      res.status(200).send();

  });

});

其次,只有在确认删除成功后才从角度范围中删除该项目:

$scope.deleteNote = function(city){

  // Make the request
  $http({
    method: 'DELETE',
    url: '/city',
    data: city.city,
    headers:{"Content-Type": "application/json;charset=utf-8"} 
  })
  // On success:
  .then(function (){
    var index = $scope.cities.indexOf(city.city);
    var cityindex = city.city;
    $scope.cities.splice(index, 1);
  })
  // On error:
  .catch(function (){
    // Do something better than this:
    alert("Something bad happened");
  })

  .finally(function (){
    // Re-enable the button.
    city.deleting = false;
  })

  // Disable the delete button and show a loading animation based on
  // this value (use `ng-disabled`).
  city.deleting = true;


};

以上内容将确保您的视图准确无误,并与服务器上的内容保持一致。