2016-09-12 4 views
0

角度ng-repeatディレクティブを使用して生成されたテーブル内の行を削除しようとしていますが、「DELETEhttp://localhost:3000/api/delbike 404(Not Found)」エラーが発生します。私はこれがサーバー側の問題だと思っていますが、角度を指定して$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'); 
       } 
      }); 
     }); 
+0

APIに「/」ルーターのURLの末尾にスラッシュを削除することで問題を解決することができた –

+0

@Riyajは、これを追加し、削除APIのためのサーバースクリプトを追加してください。 –

答えて

1

ない404 not found

http://localhost:3000/api/delbike

を取得する最初のケースについて、それは、サーバー側の問題や

バギー何かあるかもしれない確かであるとして、それは示してデバッグ中

2番目のケースの場合:

thiを使用して削除するときは未定義ですそれを送信する前に、S

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

は、さらなる処理のためにサービスに


ですから、コントローラ内部のdelbike方法は

を次のようになります deleteコールのリゾルバの内側にブロックの上に足す試してみてください
$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; 
     }); 
    }; 
+0

ありがとうDhaval。出来た!! –

+1

答えを受け入れることはできますか? –

+0

私は答えを受け入れるには十分な評判を持っていない –

0

お願いします。あなたのサーバー側のメソッドの型はHTTPDELETEまたはPOSTですか?

それはPOST方法であるなら、あなたはあなたのHTTPコール

代わりmethod:"DELETE",

の変更method:"POST",それを上のメソッドの種類を変更する必要がある。また、あなたは$scope.bikes.splice(idx,1);は、配列内のオブジェクトを削除する必要はありません。サーバーは削除された結果も返すためです。

+0

それを追加しました。おかげでRaj –

0

私は

app.delete('/api/delbike*',function(req,res){.. 
関連する問題