2017-02-20 12 views
1

Ich bin neu bei angularJS. Bitte helfen Sie mir, dieses Problem zu lösen oder geben Sie mir einen Vorschlag Link.Mein angular ng-table pagination funktioniert nicht

Ich verweise diesen Link für meine Paginierung https://gist.github.com/esvit/6821108, aber ich bekomme Fehler.

meiner Ansicht

<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> 

und hier ist mein Winkel Code

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

dann enter image description here

Bitte helfen Sie mir diese Fehlermeldung ich erhalte.

+0

Wissen Sie, wenn Sie Fragen stellen und Antworten erhalten, akzeptieren Sie entweder die beste Antwort oder fragen Sie nach, warum die gegebene Antwort nicht für Sie funktioniert – Rakeschand

Antwort

0

Sie können

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

selbst diese einfache Tabelle Paginierung tun, und Sie können die Validierung für die erste und die letzte Seite gestellt. Fügen Sie die Validierungen für die erste und die letzte Seite gemäß dieser Methode hinzu.

0

Der Fehler, den der Browser verursacht, ist mit einem unbekannten Provider verbunden. Dieser Fehler wird angezeigt, wenn AngularJS eine erforderliche Abhängigkeit nicht auflösen kann. Stellen Sie sicher, dass Sie die erforderlichen JavaScript-Datei hinzufügen (ng-table.js) in Ihrer index.html und die ‚ngTable‘ Modul als Abhängigkeit im Hauptmodul der Anwendung:

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

Auch machen Vergewissern Sie sich, dass Sie das Attribut ng-app = "theNameOfYourApp" zum body-Tag in Ihrer index.html-Datei hinzufügen. Dieser Tag wird verwendet, um Auto-Bootstrap eine AngularJS Anwendung: https://docs.angularjs.org/api/ng/directive/ngApp

Wenn Sie nicht das ng-App Attribut verwenden, dann müssen Sie die Anwendung manuell Bootstrap, wie es in dem Beispiel-Link verwendet wird Sie versehen, und die ich in Ihrem Code nicht sehen:

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

Sie diesen Link für weitere Informationen über den Fehler Unknown Provider überprüfen können: https://docs.angularjs.org/error/ $ Injektor/UNPR

ich hoffe, das helfen kann, Sie.

Grüße, Gerardo.