angularjs pagination: Неизвестный поставщик: ngTableParamsProvider

Question

Я хочу реализовать pagination в угловых js. Я новичок в угловых js.

Я получаю эту ошибку в браузере:

Ошибка: [$ Инжектор: unpr]? http://errors.angularjs.org/1.3.15/ $ форсунка/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())); 
     } 
    }) 


}]); 

Когда я добавляю здесь: [ 'вспышки', 'ngTable'] еще дает ошибку: данных не определен

Кроме того, после попытки внедрить пагинацию моих данные не будут отображаться, отображается только строка заголовка.

Пожалуйста, предложите мне какое-либо решение или любую ссылку, которая будет Guid шаг за шагом для пагинацией

Answer 1

Мой совет вам всегда инициализировать ng-таблицу в $ http.get. Оно должно быть как:

$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 

но не объявлено variabled перед использованием. Я думаю, вы пропустили это.

Вы можете просто проверить номер строки в ошибке, чтобы определить, в чем проблема. Попробуйте поставить контрольные точки, чтобы вы могли легко отслеживать проблемы.

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; 
}]); 

выше код можно найти в угловом ngtable.js, но я не использую эту версию, я успех, когда я заменить это, или изменить ngtableParams в верхнем регистре (Recommand).