我的角度ng-table分页不起作用

时间:2017-02-20 06:05:55

标签: javascript angularjs pagination

我是angularJS的新手。请帮我解决这个问题或给我建议链接。

我将此链接称为我的分页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

请帮帮我。

2 个答案:

答案 0 :(得分: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;
}

您可以对第一页和最后一页进行验证。 在此方法中根据您添加第一页和最后一页验证..

答案 1 :(得分:0)

浏览器抛出的错误与未知提供程序有关。当AngularJS无法解析所需的依赖项时,会显示此错误。确保在index.html中添加所需的JavaScript文件(ng-table.js),并在应用程序的主模块中添加'ngTable'模块作为依赖项:

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

另外,请确保将 ng-app =“theNameOfYourApp”属性添加到index.html文件中的body标记。此标记用于自动引导 AngularJS应用程序:https://docs.angularjs.org/api/ng/directive/ngApp

如果您没有使用 ng-app 属性,那么您需要手动引导应用程序,因为它在您提供的示例链接中使用,而我没有看到你的代码:

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

您可以查看此链接,了解有关未知提供商错误的更多信息:https://docs.angularjs.org/error/ $ injector / unpr

我希望这可以帮到你。

此致 赫拉尔。