在AngularJS中删除表行而不重新加载页面
我知道这个问题反复出现,但我尝试了可用的解决方案,但仍然不起作用。。我想在不重新加载页面的情况下从视图中删除该行。。这段代码有什么问题 html:表体包含来自数据库的数据:在AngularJS中删除表行而不重新加载页面,angularjs,tablerow,Angularjs,Tablerow,我知道这个问题反复出现,但我尝试了可用的解决方案,但仍然不起作用。。我想在不重新加载页面的情况下从视图中删除该行。。这段代码有什么问题 html:表体包含来自数据库的数据: <tbody id='t'> <tr ng-repeat="item in ItemsByPage[currentPage]"> <td> <
<tbody id='t'>
<tr ng-repeat="item in ItemsByPage[currentPage]">
<td>
<div ng-model="tid"> {{item.id}} </div>
</td>
<td><div editable-text="item.name" onaftersave='inlineupdateName(item.id,item.name)' ng-model="tname" data-n='item.name'>{{item.name}}</div>
<td><div editable-text="item.phone" onaftersave='inlineupdatephone(item.id,item.phone)' ng-model="tphone">{{item.phone}}</div>
</tr>
</tbody>
编辑:模块和服务:
var myApp = angular.module('myApp', ["xeditable"]);
myApp.service('ListService', function () {
this.paged = function (valLists, pageSize) {
retVal = [];
for (var i = 0; i < valLists.length; i++) {
if (i % pageSize === 0) {
retVal[Math.floor(i / pageSize)] = [valLists[i]];
} else {
retVal[Math.floor(i / pageSize)].push(valLists[i]);
}
}
return retVal;
};
});
var TableCtrl = myApp.controller('TableCtrl', function ($scope, ListService,$http) {
$scope.pageSize = 3;
$http.post('select.php')
.success(function(response) {
//alert(response);
$scope.allItems = response;
$scope.resetAll();
$scope.pagination();
});
$scope.resetAll = function () {
$scope.List = $scope.allItems;
$scope.newId = '';
$scope.newName = '';
$scope.newPhone = '';
$scope.currentPage = 0;
};
$scope.pagination = function () {
$scope.ItemsByPage = ListService.paged($scope.List, $scope.pageSize);
};
});
$scope.setPage = function () {
$scope.currentPage = this.n;
};
$scope.firstPage = function () {
$scope.currentPage = 0;
};
$scope.lastPage = function () {
$scope.currentPage = $scope.ItemsByPage.length - 1;
};
你能提供ItemsByPage的数据设计吗?当前页面中有什么内容?我想,它是在范围内定义的还是别的什么。你在使用可编辑的表格,是吗?@AnikIslamAbhi,是的。。坐look@SatyamKoyani是的,我使用x-Editable。您在拼接中是否有任何错误。你说拼接不起作用?
$scope.deleteuser = function () {
var id = $scope.delId;
console.log(id);
var data = {delId : $scope.delId};
$http.post('delete.php', data )
.success(function(response) {
// splice not working
$scope.ItemsByPage.splice(id,1);
});
};
$scope.updateuser = function () {
var data = {
updateId: $scope.updateId,
updatePhone: $scope.updatePhone
};
var phone = $scope.updatePhone;
$http.post('update.php', data )
.success(function(response) {
//what to do here to update data without reloading??
});
};
var myApp = angular.module('myApp', ["xeditable"]);
myApp.service('ListService', function () {
this.paged = function (valLists, pageSize) {
retVal = [];
for (var i = 0; i < valLists.length; i++) {
if (i % pageSize === 0) {
retVal[Math.floor(i / pageSize)] = [valLists[i]];
} else {
retVal[Math.floor(i / pageSize)].push(valLists[i]);
}
}
return retVal;
};
});
var TableCtrl = myApp.controller('TableCtrl', function ($scope, ListService,$http) {
$scope.pageSize = 3;
$http.post('select.php')
.success(function(response) {
//alert(response);
$scope.allItems = response;
$scope.resetAll();
$scope.pagination();
});
$scope.resetAll = function () {
$scope.List = $scope.allItems;
$scope.newId = '';
$scope.newName = '';
$scope.newPhone = '';
$scope.currentPage = 0;
};
$scope.pagination = function () {
$scope.ItemsByPage = ListService.paged($scope.List, $scope.pageSize);
};
});
$scope.setPage = function () {
$scope.currentPage = this.n;
};
$scope.firstPage = function () {
$scope.currentPage = 0;
};
$scope.lastPage = function () {
$scope.currentPage = $scope.ItemsByPage.length - 1;
};