Question

我正在尝试删除使用angular ng-repeat指令生成的表格中的行，并且出现“DELETE http://localhost:3000/api/delbike 404（未找到）”错误。我怀疑这是服务器端的问题，但我也没有将参数传递给角端的$http服务。任何帮助将不胜感激。我希望$scope.bikes[idx]能够传递选择删除的自行车对象。但是在调试时它显示为undefined.Below是角度代码

//controller
ub.controller('bikectrl',["$scope","fbauthFact","$log","bike",function($scope,fbauthFact,$log,bike){
    $log.log("In bike controller");
    $scope.msg = "";
    $scope.bikes =[];//bikes array to store bikes retrieved for a user
    $scope.bike ={};//bike object to submit details of bike
    //var bike ={};
    var idx;

    $scope.usr = fbauthFact.getResponseobj();

    bike.getbikes($scope.usr).then(function(response){
        $scope.bikes = response;
    },function(reason){
        $scope.msg = reason;
    });//getbikes

    $scope.delbike = function(idx){
        $scope.bikes.splice(idx,1);
        bike.delbike($scope.bikes[idx]).then(function(response){
          $scope.msg = response;
        },function(reason){
            $scope.msg = reason;
        });
    }; 


}]);
//factory
ub.service('bike',['$http','fbauthFact','$log','$q',function($http,fbauthFact,$log,$q){
    var user={};
    var bike={};
    //retrieve bikes
    this.getbikes = function(user){
        var deferred = $q.defer();
        $http({
            method:"GET",
            url:"http://localhost:3000/api/getbike",
            params: user
        }).then(function successCallback(srresponse){
            deferred.resolve(srresponse.data);
        }, 
            function failureCallback(srresponse){
            $log.error("get bikes http call failed ",srresponse.data);
            deferred.reject(srresponse.data);
        });//$http
        return deferred.promise;
    };//getbikes

    //delete bike

    this.delbike = function(bike){
        var deferred = $q.defer();
        $http({
            method:"DELETE",
            url:"http://localhost:3000/api/delbike",
            params: bike
        }).then(function successCallback(srresponse){
            deferred.resolve(srresponse.data);
        },function failureCallback(srresponse){
            deferred.reject(srresponse.data);
        });
        return deferred.promise;
    };//delbike      

}]);

    //html
    <div>
<div class='container' style='margin-top:90px;'>

<div class='row'>
    <div class='col-md-8'>
        <h3>Bikes of {{usr.first_name}}. Click <a href="#/addbike">here </a>to add</h3> 
    </div>    
</div> 
</div>
<div class='container'>
<div class='table-responsive'>
<table class='table table-hover'>
    <thead>
        <tr>
            <th>#</th>
            <th>Make</th>
            <th>Regno</th>
            <th>Model</th>
            <th>Year</th>
            <th>Delete?</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="x in bikes">
            <td>{{$index+1}}</td>
            <td>{{x.brand}}</td>
            <td>{{x.regno}}</td>
            <td>{{x.model}}</td>
            <td>{{x.year}}</td>
            <td>
                <button type="button" ng-click="delbike($index)" class="btn btn-default btn-sm">
                <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                </button>
            </td>
        </tr>    

    </tbody>
</table>
</table>

</div>
</div>  

//server side snippet

    app.delete('/api/delbike/*',function(req,res){
        ubBike.remove({regno:req.query.regno},function(err,results){
            if(err) throw err;
             if(results.result.n==0)
                 {
                res.send('Bike not registered');
                 }
                else
                {
                res.send('Success');
                }
            });
        });

Answer 1

不确定第一例获取404 not found

的情况

http://localhost:3000/api/delbike

这可能是服务器端问题或某些错误

但是对于第二种情况：

当您使用此

删除它时，它将是未定义的

$scope.bikes.splice(idx,1);

在将其发送给服务部门进行进一步处理之前

尝试在delete调用

的解析程序中写入上面的块

因此，控制器内的delbike方法将如下所示

$scope.delbike = function(idx){            
        bike.delbike($scope.bikes[idx]).then(function(response){
          $scope.msg = response;
          $scope.bikes.splice(idx,1); // add it here
        },function(reason){
            $scope.msg = reason;
        });
    };

Answer 2

请结帐是您的服务器端方法类型是HTTPDELETE还是POST？

如果是POST方法，那么您需要在HTTP电话上更改您的方法类型

更改method:"POST",而不是method:"DELETE",

此外，您不需要$scope.bikes.splice(idx,1);删除数组中的对象，因为服务器也会返回已删除的结果。

Answer 3

我能够通过删除api中路由器url末尾的斜杠'/'来解决问题

app.delete('/api/delbike*',function(req,res){..

angular删除表中的一行

3 个答案: