angular 删除 table 中的一行

Question

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

//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",

Also you don't need $scope.bikes.splice(idx,1); delete the object in the array, because the server also return deleted results.

Answer 3

我能够通过删除 api

中路由器 url 末尾的斜线 '/' 来解决问题

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

angular 删除 table 中的一行

angular deleting a row in a table

html-table

angularjs

ng-repeat