简体   繁体   English

如何使用angularjs从表中删除行

[英]How to delete the row from table using angularjs

I want to delete the row from table using angularjs. 我想使用angularjs从表中删除行。 But it is not working properly, It delete the previous row. 但是它不能正常工作,它将删除上一行。 Not the correct row. 没有正确的行。 How to rectify this. 如何纠正这一点。
Please see the working DEMO 请查看正在运行的演示

Code snipped 代码被截断

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

Try like this 这样尝试

View 视图

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

Controller 控制者

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

You need to get the index of trying to delete 您需要获取尝试删除的索引

to do that, 要做到这一点,

 $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 : if you pass the $index through ng-click as data-ng-click="removeRow($index)" this will work only if there is no order by options in ng-repeat if you have sorting options then your deletion gets wrong. PS: 如果您通过ng-click$index传递为data-ng-click="removeRow($index)"则只有在您有排序选项的情况下,如果ng-repeat的选项没有顺序,此选项才有效错误。 because when sorting is there $index is same as the (0,1,2,3) but array order may have changed (ex: 0-index element can lay in 1-index of sorted array so if you pass the $index then it will delete the 1st index of actual array) so $index not represent the actual array element. 因为在排序时$index与(0,1,2,3)相同,但是数组顺序可能已更改(例如:0-index元素可以位于已排序数组的1-index中,因此如果传递$ index,则它将删除实际数组的第一个索引),因此$ index不代表实际数组元素。

sorting options => orderBy 排序选项=> orderBy

UPDATED DEMO 更新的演示

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM