Angularjs 如何在单击按钮时从表中删除整行？

我在一张桌子的每一行有两个按钮。单击任何一个按钮，整个行都应该从表中删除，并且我将向spring控制器发送一些值。它应该在数据库中更新，并且应该删除整行。我正在使用angularjs、spring mvc和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);
          });
        }

/.html文件
任务名称
所有者名称
授权
{{task.name}
{{owner.ownerName.name}{{$last？''：'，'}}
批准
拒绝
//controller.js
$scope.approveTask=功能（任务）{
$http.put（“/task/approve/”+task.id）。成功（函数（数据）{
警报（“已批准！”+数据）；
});
}
$scope.rejectTask=功能（任务）{
$http.put（“/task/reject/”+task.id）.成功（函数（数据）{
警报（“拒绝！”+数据）；
});
}

您正在对行使用

ng repeat

，在

taskDetails

上迭代，这样您就可以像这样从数组中删除一个条目

$scope.rejectTask = function (index, task) {
     $scope.taskDetails.splice(index, 1);
}

在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.

    $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
      });
    }