我知道它的重复问题,但我尝试了可用的解决方案,但仍然无法工作..我想从角度中删除视图中的行而不重新加载页面..此代码中的问题是什么?
html:表的主体包含来自数据库的数据:
<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>
和删除和更新行的HTML代码:
<div class="col-xs-4">
<input type="text" ng-model="delId" class="form-control" placeholder="Enter user id to delete th user">
<button ng-click="deleteuser()" type="button" class="btn btn-primary">Delete User</button>
</div>
<div class="col-xs-4">
<input type="text" ng-model="updateId" class="form-control" placeholder="Enter user id to update his phone">
<input type="text" ng-model="updatePhone" class="form-control" placeholder="Enter user new phone">
<button ng-click="updateuser()" type="button" >Update User</button>
</div>
删除和更新功能:
$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;
};