在角度.js中编辑后立即刷新数据表

Refresh datatable immediately after edit in angular.js

本文关键字：刷新 数据表 编辑 js      更新时间：2023-09-26

我在我的angular.js应用程序中使用数据表。在更新后，我需要在不刷新整个页面的情况下显示更新结果。只需刷新表并使用新值进行更新。请帮忙。

这是我的控制者.js

$scope.updateInternship = function() {
    $("#internshipEdit").modal('hide');
    internshipService.updateInternship(
        $scope.internship,
        function(data) {
            $rootScope.loggedInUser = data;
            $scope.internship = data;
            $growl.box(
                'Hello!',
                'Your details have been updated.',
                {
                    class : 'success',
                    sticky : false,
                    timeout : 5000
                }
            ).open();
        }
    );
}

这是显示表格的 html 页面。

<table datatable="ng" dt-options="dtOptions" cellspacing="0" width="100%" class="table table-striped table-hover table-bordered">
    <thead>
        <tr>
            <th>Id</th>
            <th>Title</th>
            <th>Category</th>
            <th>Status</th>
            <th>Created date</th>
            <th>Action</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Id</th>
            <th>Title</th>
            <th>Category</th>
            <th>Status</th>
            <th>Created date</th>
            <th>Action</th>
        </tr>
    </tfoot>
    <tbody>
        <tr ng-repeat="internship in allinternships">
            <td><span>{{$index+1}}</span></td>
            <td><span>{{internship.title}}</span></td>
            <td><span>{{internship.category.name}}</span></td>
            <td><span>{{internship.status}}</span></td>
            <td><span>{{internship.appliedDate | date:'d MMMM yyyy'}}</span></td>
            <td>
                <button class="btn btn-default btn-sm" data-title="Hold" data-toggle="modal" ng-click="hold(internship.id)">
                    <i class="fa fa-pause"></i>
                </button>
                <a href="javascript:;" class="btn btn-default btn-sm" data-title="Edit" data-toggle="modal" ng-click="update(internship.id)" >
                    <i class="icon bb-edit"></i>
                </a>
                <button class="btn btn-default btn-sm" data-title="View" data-toggle="modal" ng-click="deleteinternship(internship.id,$index)">
                    <i class="icon bb-trash"></i>
                </button>
                <button class="btn btn-default btn-sm" data-title="View" data-toggle="modal" ng-click="viewInternship(internship.id)">
                    <i class="icon bb-view"></i>
                </button>
            </td>
        </tr>
    </tbody>
</table>

你可以试试这个解决方案：

  1. 如果您使用的是路由提供程序，则可以使用

    $route.reload（）;

  2. 如果您使用的是$state提供程序，则可以使用

    $state.reload（）;

对不起，如果我误解了你的情况。

尝试在更新数据后添加$scope.$apply();。

否则请尝试：

$scope.$watch(function() {
  // Here you should return the value that changes
  return $scope.internship;
}, function() {
  // You arrive here if the returned element before has changed
  $scope.internship = data; 
});

我很难理解你在做什么的行为。让我知道它是否有帮助。

相关文章：