How to remove entire row from table onclick of button? - angularjs

Question

I have two button in each row of a table. Onclick of any of the button the entire row should be removed from the table and also I'm sending some value to spring controller. It should be updated in database and also the entire row should be removed. I'm using angularjs,spring-mvc and mongodb.
// .html file
<table class="table table-bordered">
<thead>
<tr>
<th style="text-align: center;">Task name</th>
<th style="text-align: center;">Owner name</th>
<th style="text-align: center;">Authorize</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="task in taskDetails">
<td style="text-align: center;">{{task.name}}</td>
<!-- <td style="text-align: center;">{{task.owners}}</td> -->
<td style="text-align: center;">
<span ng-repeat="owner in task.owners">{{owner.ownerName.name}}{{$last ? '' : ', '}}</span>
</td>
<td style="text-align:center;">
<!-- <button class="btn btn-mini btn-primary" ng-click="approveTask(taskDetails.indexOf({{task.id}}), task)" value="approveTask">Approve</button>
<button class="btn btn-mini btn-danger" ng-click="rejectTask(taskDetails.indexOf({{task.id}}), task)" value="approveTask">Reject</button>
-->
<button class="btn btn-mini btn-primary" ng-click="approveTask(task)" value="approveTask">Approve</button>
<button class="btn btn-mini btn-danger" ng-click="rejectTask(task)" value="rejectTask">Reject</button>
</td>
</tr>
</tbody>
</table>
//controller.js
$scope.approveTask = function(task) {
$http.put("/task/approve/"+ task.id).success(function(data) {
alert("Approved! "+ data);
});
}
$scope.rejectTask = function(task) {
$http.put("/task/reject/"+ task.id).success(function(data) {
alert("Rejected! "+ data);
});
}

Answer 1

Well you're using ng-repeat for your rows, iterating over taskDetails so you can just remove that one entry from within the array like so
$scope.rejectTask = function (index, task) {
$scope.taskDetails.splice(index, 1);
}

Answer 2

In your HTML :
<button class="btn btn-mini btn-danger" ng-click="rejectTask($index)" value="rejectTask">Reject</button>
// We just need to pass the index for accessing the relevant object.
In your Javascript :
$scope.rejectTask = function($index) {
$scope.currentIndex = $index;
// You may want to show some screen loader to prevent user intervention during the ajax call.
$http.put("/task/reject/"+ task.id).success(function(data) {
// AS the ajax call is complete, it is now safe to splice the array.
$scope.taskDetails.splice($scope.currentIndex, 1);
$scope.currentIndex = -1;
//Remove the loader here
});
}