javascript - 带有 Angular UI Bootstrap 分页指令的 AngularJS 不会隐藏结果

Question

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

控制者

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>

我很感激任何建议，谢谢!

Answer 1

你需要在下面的 ng-reapeter 代码中过滤数据才能工作

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

    }
});