angularjs 分页：未知提供者：ngTableParamsProvider

Question

我想在 angular js 中实现分页。我是 angular js 的新手。

我在浏览器中收到此错误：

错误：[$injector:unpr] http://errors.angularjs.org/1.3.15/$injector/unpr?p0=ngTableParamsProvider%20%3C-%20ngTableParams%20%3C-%20allUsersCtrl

我已将这些文件包含在布局视图的 HEAD 部分：

<!-- angular js--->
    <script src="<?php echo base_url();?>angular/js/angular.min.js"></script>
    <script src="<?php echo base_url();?>angular/js/angular-route.min.js"></script>
    <!-- flash msg -->
    <script src="<?php echo base_url();?>angular/js/angular-flash.js"></script>
    <!-- flash msg -->
     <!--loading bar-->
   <script src="<?php echo base_url();?>angular/js/loading-bar.min.js"></script>
   <script src="<?php echo base_url();?>angular/js/angular-animate.min.js"></script>
   <script src="<?php echo base_url();?>angular/js/ng-table.min.js"></script>
    <!--loading bar-->

    <script src="<?php echo base_url();?>angular/js/demo_angular.js"></script>
    <script src="<?php echo base_url();?>angular/js/app.js"></script>

这是我的 table 部分 html:

 <table ng-table="tableParams"  class="table table-striped table-bordered table-hover" id="table_all_users">
                                    <thead>
                                         <tr>
                                            <th width="20%"><input type="checkbox" name="chk_all" id="chk_all"  onchange="checkAll(this)" /> Select</th>
                                            <th width="15%">Sr. No.</th>
                                            <th width="35%"><a href="" ng-click="reverse=!reverse;order('username', reverse)">User Name</a></th>
                                            <th width="25%"><a href="" ng-click="reverse=!reverse;order('fname', reverse)">First Name</a></th>
                                            <th width="25%"><a href="" ng-click="reverse=!reverse;order('lname', reverse)">Last Name</a></th>
                                            <th width="15%"><a href="" ng-click="reverse=!reverse;order('mobile', reverse)">Mobile</a></th>
                                            <th width="15%"><a href="" ng-click="reverse=!reverse;order('email', reverse)">Email</a></th>
                                            <th width="15%">Action</th>
                                        </tr>
                                    </thead>

                                    <tbody ng-init="get_users()">
                                        <tr class="gradeX" ng-repeat="user in allUsers | filter:query">
                                          <td width="20%"><input type="checkbox" name="list[]" class="chk_all" value="" id="" onclick="uncheck_select_all(this);" /></td>
                                          <td width="15%">{{ $index + 1 }}</td>
                                          <td width="35%">{{ user.username }}</td>
                                          <td width="25%">{{ user.fname }}</td>
                                          <td width="25%">{{ user.lname }}</td>
                                          <td width="15%">{{ user.mobile }}</td>
                                          <td width="15%">{{ user.email }}</td>
                                          <td width="15%"><a title="Edit User" href="#/edit_user/{{user.user_id}}" ><span class="fa fa-pencil"></span></a> | <a title="Delete User"  id=""  style="cursor:pointer;"  ng-click="delete_user(user.user_id)" ><span class="fa fa-trash-o"></span></a></td>
                                        </tr>

                                    </tbody>
                                </table>

这是脚本。

var angularControllers = angular.module('angularControllers', ['flash']);  

angularControllers.controller('allUsersCtrl', ['$scope','$http','$filter','Flash','ngTableParams', function($scope,$http,$filter,Flash,ngTableParams){
   $scope.get_users = function()
        {
            $http.get("../admin/users/angular_all_users").success(function(data)
            {
                $scope.allUsers = data;    
            });
        }
    //for sorting by table column
    var orderBy = $filter('orderBy');
    $scope.order = function(predicate, reverse) 
    {
        $scope.allUsers = orderBy($scope.allUsers, predicate, reverse);
    }
    //table pagination
     $scope.tableParams = new ngTableParams({
        page: 1,            // show first page
        count: 10           // count per page
    }, {
        total: data.length, // length of data
        getData: function ($defer, params) {
            $defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
        }
    })


}]);

当我在这里添加为：['flash','ngTable'] 仍然给出错误：数据未定义

同样在尝试实现分页后我的数据不会显示，只显示 header 行。

请给我建议任何解决方案或任何 link 将逐步指导分页

Answer 1

你收到错误是因为你试图包含一个名为 ngTableParams 的依赖项，我认为它在你没有包含的名为 ngTable 的模块中。

当您也包含该模块时，您得到的数据是未定义的。这是因为您在

行中使用了 data 变量

total: data.length, // length of data

但您没有在使用前声明变量。我想你错过了。

您可以只检查错误中的行号来确定问题所在。尝试放置断点，以便您轻松跟踪问题。

Answer 2

我对你的建议是始终在 $http.get 中初始化 ng-table。它必须像：

    $http.get('../admin/users/angular_all_users').success(function (data) {
            $scope.tableParams = new ngTableParams({
                page: 1,
                count: 10
            },
            {
              total: data.length,
              getData: function ($defer, params) {
       // use build-in angular filter for ordering
        var orderedData = params.sorting() ?
                $filter('orderBy')(data, params.orderBy()) : data;

        $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
    }
});
    });

有了这个 "best practice"，您将始终避免 data 及其属性未定义的问题。

不要忘记在您的模块中包含 ngTable。

希望这会推动你前进。

此致！

Answer 3

我也遇到这个错误

/**
 * @ngdoc service
 * @name ngTableParams
 * @description Backwards compatible shim for lowercase 'n' in NgTableParams
 */
angular.module('ngTable').factory('ngTableParams', ['NgTableParams', function(NgTableParams) {
    return NgTableParams;
}]);

上面的代码可以在angular-ngtable.js中找到，但是我不用这个版本，替换成功，或者把ngtableParams改成大写（推荐).

angularjs 分页：未知提供者：ngTableParamsProvider

angularjs pagination: Unknown provider: ngTableParamsProvider

pagination

angularjs

ngtable