2017-02-20 3 views
1

Я новичок в angularJS. пожалуйста, помогите мне решить эту проблему или дать ссылку на предложение.Моя угловая ng-таблица pagination не работает

Я ссылаюсь на эту ссылку для разбивки на страницы https://gist.github.com/esvit/6821108, но я получаю ошибку.

мой взгляд

<div class="row"> 
    <table ng-table="tableParams" ng-cloak class="table table-bordered table-striped custom-table" ng-hide="data.length==0"> 
    <tr> 
     <th>Id</th> 
     <th>Name</th> 
     <th>Email</th> 
     <th>Order Status</th> 
     <th>Contact No</th> 
     <th>Pensionable</th> 
     <th>Details</th> 
     <th>Assign to a Doctor</th> 
    </tr> 
    <tr ng-repeat="row in data" ng-cloak> 
     <td class="custom-td">{{row.id}}</td> 
     <td>{{row.name}}</td> 
     <td>{{row.email}}</td> 
     <td ng-style="set_color(row.OrderStatusColor)">{{row.OrderStatusName}} {{$row.OrderStatusColor}}</td> 
     <td> 
     <div ng-show="row.primary_phone == 'Mobile'"> 
      {{row.mobilePhone}} ({{"Mobile"}}) 
     </div> 
     <div ng-show="row.primary_phone == 'Work'"> 
      {{row.workPhone}} ({{"Work"}}) 
     </div> 
     <div ng-show="row.primary_phone == 'Home'"> 
      {{row.homePhone}}({{"Home"}}) 
     </div> 
     </td> 
     <td class="custom-td">{{row.isPensionable}}</td> 
     <td class="custom-td"><a href="/DashBoard/ViewDetails?pid={{row.id}}">View Details</a></td> 
     <td class="custom-td"><a href="" ng-click="addAppointment(row.id)">Assign</a></td> 
    </tr> 
    </table> 
</div> 

и вот мой угловой код

detailsApp.controller("patientCtrl", function ($scope, $http, ngTableParams) { 
$scope.init = function() { 
    $scope.obj = {}; 
    $scope.changeclass = "col-md-12"; 
    $http({ 
     method: "POST", 
     url: "/Dashboard/PatientData" 
    }).success(function (results) { 
     $scope.data = results.Data;   
    }); 
} 

$scope.tableParams = new ngTableParams({ 
    page: 1, 
    count: 10 
}, { 
    total: $scope.data.length, // length of data 
    getData: function ($defer, params) 
    { 
     $scope.users = $scope.data.slice((params.page() - 1) * params.count(), params.page() * params.count()); 
     $defer.resolve($scope.users); 
    } 
}); 

тогда я получаю эту ошибку enter image description here

Пожалуйста, помогите мне.

+0

Знаете ли вы, когда задаете вопрос, и получаете ответы, либо вы принимаете лучший ответ, либо задаете перекрестные вопросы о том, почему данный ответ не работает для вас – Rakeschand

ответ

0

Вы можете сделать это легко таблицу разбиения на страницы самостоятельно

| limitTo : query.limit : (query.page-1)*query.limit" 
You can use limitTo over ng-repeat of the list or table. 

$scope.query = { 
    page : 1, 
    limit : 20 
}; 

$scope.previousPage = function(){ 
    $scope.query.page = $scope.query.page - 1; 
} 
$scope.nextPage = function(){ 
    $scope.query.page = $scope.query.page + 1; 
} 

И Вы можете поставить проверку на первой и последней странице. Добавить проверку на последнюю и последнюю страницу в соответствии с вами в этом методе.

0

Ошибка, которую браузер бросает, связана с неизвестным поставщиком. Эта ошибка отображается, когда AngularJS не может разрешить требуемую зависимость. Убедитесь, что вы добавляете нужный JavaScript файл (нг-table.js) в вашем index.html и модуль в «» ngTable как зависимость в главном модуле приложения:

var detailsApp = angular.module('theNameOfYourApp', ['ngTable']);

Кроме того, сделать убедитесь, что вы добавляете атрибут ng-app = "theNameOfYourApp" тегу body в файле index.html. Этот тег используется для автоматической начальной загрузки AngularJS применение: https://docs.angularjs.org/api/ng/directive/ngApp

Если вы не используете нг-приложение атрибут, то вам нужно будет вручную начальной загрузки приложения, как он используется в примере ссылки вы предоставили, и которые я не вижу в вашем коде:

angular.bootstrap(document.getElementById('demo'), [app.name]);

вы можете проверить эту ссылку для получения дополнительной информации о неизвестной ошибке поставщика: https://docs.angularjs.org/error/ $ инжектора/unpr

Я надеюсь, что это может помочь вы.

С уважением, Херардо.

Смежные вопросы