Question

我是angularjs的新手，并且使用angularjs bootstrap数据表。现在当我向我的数据表添加新记录时，它正在mysql数据库中更新，但我需要重新加载我的页面，所以新记录也可以显示在表中，但我不知道该怎么做。谁能帮帮我吗？我可以在ui-bootstrp.js中的addRoleData（）成功时初始化tableRoleCtrl吗？

这是我的代码

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

当数据更新时，您实际上不需要重新加载页面，AngularJS是MVC框架，每个模型 AngularJS将创建一个观察者来更新视图。 / p>

基本上，您只需将表数据存储到控制器中的范围变量$scope.tableData，然后使用ng-repeat="row in tableData"来迭代表数据。 ng-repeat会看到您的tableData更改，然后更新您的表格。

Answer 2

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

<p id="description"></p>
 <p>Hello world</p>

AngularJs - 在向datatable添加新数据后如何重新加载页面

2 个答案: