如何刷新数据表angularjs后删除行？

Question

我想在刷新数据表后删除行或使用 angularjs 重新加载数据表。 我已经完成了这段代码显示数据列表和删除行。

app.controller("userscontroller", ["$scope", "$http", "DTOptionsBuilder", "DTColumnBuilder", "userservice","$compile"


function ($scope, $http, DTOptionsBuilder, DTColumnBuilder, userservic,$compile) {       

$scope.dtColumns = [            
    DTColumnBuilder.newColumn("fullName", "Full Name").withOption('name', 'firstname'),
    DTColumnBuilder.newColumn("username", "Name").withOption('name', 'username'),
    DTColumnBuilder.newColumn("email", "Email").withOption('name', 'email'), 
    DTColumnBuilder.newColumn(null).withTitle('Action').withOption('defaultContent', ' ').notSortable()
        .renderWith(function (data, type, full, meta) {
            if (data.UserCount > 1)
                return '<button class="btn btn-primary" ng-click="delete(' + data.id + ');"><i class="fa fa-eye"></i>' + '</button>';                    
        })          
]

$scope.dtOptions = userservice.GetAllUser(DTOptionsBuilder)
.withOption('processing', true)
.withOption('serverSide', true)
.withPaginationType('full_numbers')
.withDisplayLength(50)
.withOption('aaSorting', [3, 'desc'])

 function createdRow(row, data, dataIndex) {
    $compile(angular.element(row).contents())($scope);
}
}]);

这里是我的删除功能：

$scope.delete= function (id) {
        if (confirm("Are you sure want to delete?") == true) {
            var getData = userservice.Deleteuser(id);
            getData.then(function (Msg) {
                if (Msg.statusText == "OK") {
                //here what code i written i don't know
                }
            }, function (err) {

            });
        }
    }

这是我的html代码=>

<table id="tbluserList" datatable="" dt-options="dtOptions" dt-columns="dtColumns" dt-instance="dtInstance" class="table table-hover"> </table>

Answer 1

试试下面的代码，

if (Msg.statusText == "OK") {
    var index = -1;     
    var users = $scope.users;// Let you have all users here
    for( var i = 0,len=users.length; i < len; i++ ) {
        if( users[i].id === id ) {
            index = i;
            break;
        }
    }
    if( index === -1 ) {
        alert( "Something gone wrong" );
    }
    $scope.users.splice( index, 1 );        
}

一条捷径，

在您的函数中传递$index 并使用$index 对它进行切片，

return '<button class="btn btn-primary" ng-click="delete('+data.id+',$index);">...';                    

和删除功能

$scope.delete = function (id,$index) {
   ....
   if (Msg.statusText == "OK") {
      $scope.users.splice($index, 1 );
   }
   ....
}

删除操作后尝试reloadData，

//Add below dtOptions
$scope.dtInstance = {};
...

$scope.delete = function (id) {
    ....
    if (Msg.statusText == "OK") {
        $scope.dtInstance.reloadData();
    }
    ...
}