[英]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不代表实际数组元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.