douxian6260 2018-05-20 21:57
浏览 86

Angularjs分页显示基于限制的内容,但不显示页面编号以在页面之间导航

enter image description hereSo I am using angularjs to display contents that are retrieved from mySQL. I am trying to create a pagination with angularjs to display them a certain amount of them at each page. My problem is that in the VIEW, it displays the contents based on the limit I defined in the controller, however, it is not displaying the page numbers that I can use to navigate through the pages. any thoughts???

Here is my code:

<!-- the VIEW -->
<div class="container testing" ng-controller="musicControl">
    <table>
      <tr ng-repeat="post in posts | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
        <td style="padding:15px">{{ post.postType }}</td>
        <td style="padding:15px">{{ post.postTitle | uppercase }}</td>
        <td style="padding:15px">{{ post.postDescription }}</td>
        <td style="padding:15px">{{ post.postDate | date }}</td>
        <td style="padding:15px">
            <?php 
               include "functions.php";
               placeMusic('{{ post.src | trustAsResourceUrl }}');
            ?>
        </td>
      </tr>
    </table>
    <div ng-show="filteredItems > entryLimit">
        <div pagination="" page="currentPage"
             on-select-page="setPage(page)"
             boundary-links="true" total-items="filteredItems"
             items-per-page="entryLimit" 
             class="pagination-small" previous-text="&laquo;"
             next-text="&raquo;">
        </div>
    </div>
    <br>
</div>

Module -->

var app = angular.module("myApp", ["ngRoute"]);     
<!-- controller -->
app.controller('musicControl', function($scope, $http) {
    $http.get("pages/db_section/music.php")
    .then(function (response) {
        $scope.posts = response.data.records;
        $scope.currentPage = 1; //current page
        $scope.entryLimit = 2; //max no of items to display in a page
        $scope.filteredItems = $scope.posts.length; //Initially for no filter  
        $scope.totalItems = $scope.posts.length;
    });
    $scope.setPage = function(pageNo) {
        $scope.currentPage = pageNo;
    };

});




<!-- filter -->
app.filter('trustAsResourceUrl', ['$sce', function($sce) {
    return function(val) {
        return $sce.trustAsResourceUrl(val);
    };
}]);

app.filter('startFrom', function() {
    return function(input, start) {
        if(input) {
            start = +start; //parse to int
            return input.slice(start);
        }
        return [];
    }
});
  • 写回答

0条回答 默认 最新

    报告相同问题?