在AngularJS中删除没有重新加载页面的表行

时间:2015-10-01 13:43:49

标签: angularjs tablerow

我知道它的重复问题,但我尝试了可用的解决方案,但仍然无法工作..我想从角度中删除视图中的行而不重新加载页面..此代码中的问题是什么?

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

0 个答案:

没有答案