带有 AngularUI Bootsrap 分页指令的 AngularJS 不会隐藏结果 [英] AngularJS with AngularUI Bootsrap pagination directive doesn't hide results

问题描述

我第一次尝试使用 Angular-ui 分页指令，但很困惑为什么它不起作用.我可以看到分页按钮，它正确地显示了两个要分页的页面，因为有 8 个结果和 items-per-page="5" 但是我所有的数据项都显示出来了，并且没有被隐藏到五个每页.

I'm trying to use Angular-ui pagination directive for the first time and am confused why it isn't working. I can see the pagination buttons and it properly displays two pages to paginate through since there are 8 results and items-per-page="5" But all my data items are showing and not being hidden to five per page.

控制器

dataService.get(uri).then(function (data) {

    $scope.testimonials = data;

    $scope.totalItems = $scope.testimonials.length;
    $scope.currentPage = 1;

    $scope.setPage = function(pageNo) {
        $scope.currentPage = pageNo;
    };

    $scope.pageChanged = function() {
        console.log('Page changed to: ' + $scope.currentPage);
    }
});

查看

<table class="table table-striped" ng-show="testimonials.length">
    <thead>
      <th>Name</th>
      <th>Message</th>
    </thead>
    <tbody>
    <tr ng-repeat="testimonial in testimonials">
      <td>{{testimonial.name}}</td>
      <td>{{testimonial.message}}</td>
      <td><a href="testimonials/{{testimonial.id}}" class="btn btn-primary">Edit</a></td>
      <td><button class="btn btn-danger" ng-click="delete(testimonial)">Delete</button></td>
    </tr>
    </tbody>

    <pagination total-items="totalItems" ng-model="currentPage" items-per-page="5" ng-change="pageChanged()"></pagination>
</table>

感谢您的建议，谢谢！

推荐答案

你需要在下面的 ng-reapeter 代码中过滤数据应该可以工作

Yo need filter data in your ng-reapeter code below should works

<table class="table table-striped" ng-show="testimonials.length">
    <thead>
      <th>Name</th>
      <th>Message</th>
    </thead>
    <tbody>
    <tr ng-repeat="testimonial in testimonials | startFrom: (currentPage-1)*5| limitTo: 5">
      <td>{{testimonial.name}}</td>
      <td>{{testimonial.message}}</td>
      <td><a href="testimonials/{{testimonial.id}}" class="btn btn-primary">Edit</a></td>
      <td><button class="btn btn-danger" ng-click="delete(testimonial)">Delete</button></td>
    </tr>
    </tbody>

    <pagination total-items="totalItems" ng-model="currentPage" items-per-page="5" ng-change="pageChanged()"></pagination>
</table>

过滤器开始于:

app.filter('startFrom', function () {
    return function (input, start) {



        if (input === undefined || input === null || input.length === 0
         || start === undefined || start === null || start.length === 0 || start === NaN) return [];
        start = +start; //parse to int

        try {
            var result = input.slice(start);
            return result;

        } catch (e) {

        //    alert(input);
        }

    }
});

这篇关于带有 AngularUI Bootsrap 分页指令的 AngularJS 不会隐藏结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！