如何使用angularjs从表中删除行

时间:2015-07-07 05:03:25

标签: javascript angularjs

我想使用angularjs从表中删除行。但它没有正常工作,它删除了前一行。不是正确的行。如何纠正这一点。
请参阅正常工作DEMO

代码已剪切

<body ng-app="myApp" ng-controller="tasksCtrl">
    <div>
        <table class="table table-striped">
            <tbody>
                <tr ng-repeat="task in tasks">
                    <td>
                        <a class="btn" data-toggle="modal" data-ng-click="removeRow(task)">Delete</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        var app = angular.module('myApp', []);

        app.controller('tasksCtrl', function($scope, $http) {
            $http.get("data.json")
                //$http.get("/todo/api/v1.0/tasks")
                .success(function(response) {
                    console.log(response.tasks)
                    $scope.tasks = response.tasks;
                });

            $scope.removeRow = function(task) {
                $scope.tasks.splice(task, 1);
            };
        });
    </script>
</body>

2 个答案:

答案 0 :(得分:2)

试试这个

查看

<a class="btn" data-toggle="modal" data-ng-click="removeRow($index)">Delete</a>

<强>控制器

$scope.removeRow = function(index) {
   $scope.tasks.splice(index, 1);
};

答案 1 :(得分:2)

您需要获取尝试删除的索引

这样做,

 $scope.removeRow = function(task) {
     // get the index
     var index = $scope.tasks.indexOf(task);

     //delete the element from the array
     $scope.tasks.splice(index, 1);
 };

PS:如果您将$index传递给ng-click作为data-ng-click="removeRow($index)",只有在ng-repeat中的选项没有排序时才会有效选项然后你的删除错了。因为排序时$index与(0,1,2,3)相同但数组顺序可能已更改(例如:0-index元素可以放在排序数组的1索引中,所以如果你通过了$ index然后它将删除实际数组的第一个索引)所以$ index不代表实际的数组元素。

  

排序选项=&gt; orderBy

UPDATED DEMO