AngularJs-将新数据添加到数据表后如何重新加载页面

Question

I am very new to angularjs and using angularjs bootstrap datatable. Now when I add new record to my datatable it is being updated in mysql database but I need to reload my page so new record can be displayed in table also but I don't know how to do it. Can anyone please help me? Can I init tableRoleCtrl on success of addRoleData() in ui-bootstrp.js?

Here is my code

ui-bootstrap.js

.controller('ModalInstanceCtrl', function ($scope, $modalInstance, content, tableService) {

        //add new role
        $scope.addRole = function(w) {
            tableService.addRoleData(w)
        }
})

table.js

.controller('tableRoleCtrl', function($filter, $sce, ngTableParams, tableService) {
        //var data = tableService.data;

        var self = this; 
        var promise = tableService.getRoleData();
        self.data = [];

        promise.then(
            function(payload) { 

                self.data = payload.data;
                //alert(JSON.stringify(self.data));
                //console.log("test" + self.data)

                self.tableEdit = new ngTableParams({
                    page: 1,            // show first page
                    count: 10           // count per page
                }, {
                    total: self.data.length, // length of data
                    getData: function($defer, params) {
                        $defer.resolve(self.data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
                    }
                });

            },
            function(errorPayload) {
              $log.error('failure loading movie', errorPayload);
            }); 

        //to updaate data   
        self.updateRole = function(w) {
            tableService.updateRoleData(w); 
        }

    })

service.js

.factory('tableService', ['$http', function($http){
        var _this = this;
        return { 

            // role
            getRoleData: function() {
                return $http.get("data/getRoles.php");
            },
            updateRoleData: function(w) {
                $http.post("data/updateRole.php", w)
            },
            addRoleData: function(w) {
                $http.post("data/addRole.php", w)
            }
        }
    }])

html

<div data-ng-controller="ModalDemoCtrl">
    <script type="text/ng-template" id="addrole.html">
        <div class="modal-header">
            <h4 class="modal-title">Add Role</h4>
        </div>
        <div class="modal-body m-l-15">
            <form role="form">
                <div class="row">
                    <div class="col-md-8">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="zmdi zmdi-account"></i></span>
                            <div class="fg-line">
                                <input type="text" name="role_title" ng-model="add_role.role_title" class="form-control" placeholder="Title">
                            </div>
                        </div>
                        <br/>
                        <div class="">
                            <div class="input-group"><span class="input-group-addon"><i class="zmdi zmdi-account-circle"></i></span>
                                <select chosen multiple>
                                    <option>Use seetings from</option>
                                    <option>HR</option>
                                    <option>Employee</option>
                                    <option>Admin</option>
                                </select>
                            </div>
                        </div>
                    </div><br/>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button class="btn btn-link" ng-click="ok(); addRole(add_role)">Submit</button>
            <button class="btn btn-link" ng-click="cancel()">Cancel</button>
        </div>

    </script>
    <button class="btn btn-default" ng-click="openStatic('addrole')">Add Roles</button>
</div>
<div class="table-responsive">
    <table ng-table="tctrl.tableEdit" class="table table-striped" show-filter="true">
        <tr ng-repeat="w in $data" ng-class="{ 'active': w.$edit }" ng-click="ShowHide12()" style="cursor:pointer">
            <a href="" ng-click="getSingleRole()">
                <td><span ng-if="!w.$edit">{{ w.rl_title }}</span>

                    <div ng-if="w.$edit"><input class="form-control" type="text" ng-model="w.rl_title" /></div>
                </td>
            </a>
            <td>
                <button type="button" class="btn btn-default" ng-if="!w.$edit" ng-click="w.$edit = true; "><i class="zmdi zmdi-edit"></i></button>&nbsp;
                <button type="button" class="btn btn-default" ng-if="!w.$edit" ng-click="w.$edit = false"><i class="zmdi zmdi-close"></i></button>
                <button type="button" class="btn btn-success" ng-if="w.$edit" ng-click="w.$edit = false; tctrl.updateRole(w)"><i class="zmdi zmdi-check"></i></button>
                <button type="button" class="btn btn-default" ng-if="w.$edit" data-ng-click="w.$edit = 0" ><i class="zmdi zmdi-close"></i></button>
            </td>
        </tr>
     </table>
</div>

Answer 1

You don't actually need to reload page when data is updated, AngularJS is MVC framework and each model AngularJS will create a watcher to update view .

Basically, you just need to store your table data to a scope variable $scope.tableData in your controller then use ng-repeat="row in tableData" to iterate your table data. ng-repeat will watch your tableData changes then update your table.

Answer 2

如果您动态更改了ngTable数据，则可以使用以下方法刷新它：

self.tableEdit.reload();