Question

我想在角度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>

这是我在部分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()));
        }
    })


}]);

当我在此处添加时： [＆＃39; flash＆＃39;，＆＃39; ngTable＆＃39;] 仍然会出错：数据未定义

在尝试实施分页我的数据不会显示之后，只会显示标题行。

请向我建议任何解决方案或任何一步一步分页的链接

Answer 1

我的建议是始终在 $ 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()));
    }
});
    });

通过这种“最佳实践”，您将始终避免data带有它的属性未定义的问题。

不要忘记在模块中加入ngTable。

希望这会推动你前进。

祝你好运！

Answer 2

您收到错误是因为您尝试包含一个名为ngTableParams的依赖项，我认为该依赖项位于名为ngTable的模块中，但您尚未包含该依赖项。

当您包含该模块时，您将获得未定义的数据。这是因为您在行中使用data变量

total: data.length, // length of data

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

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

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

3 个答案: