Javascript 带有AngularUI Bootsrap分页指令的AngularJS不'；不要隐藏结果

我第一次尝试使用AngularUI分页指令，但不明白为什么它不起作用。我可以看到分页按钮，它正确地显示了要分页的两个页面，因为每页有8个结果和

项=“5”

，但我的所有数据项都显示出来了，并且没有隐藏到每页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>

名称
消息
{{推荐名称}
{{推荐信息}
删除

---

谢谢你的建议，谢谢

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

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

---

我找不到我使用的原始示例，但这就是我的应用程序中的示例

过滤器部分并不重要，但filterProducts对象是被切片并显示在视图中的对象。查看

$watch

了解其工作原理

app.controller('ProductController', function($scope, $filter, $routeParams, $rootScope, $location, Products){

    $scope.Products = Products;
    Products.brandLimit = $routeParams.brandLimit;
    Products.brand = $routeParams.brand;

    // try to avoid reloading the prod data
    if (!Products.products){
        Products.getProducts().then(function(data){
            Products.products = data.products;
            Products.pagination();
        });
    }else{
        Products.pagination();
    }

    // watch for when the pagination changes
    $scope.$watch('Products.currentPage + Products.numPerPage', function() {
        var begin = ((Products.currentPage - 1) * Products.numPerPage);
        var end = begin + Products.numPerPage;

        Products.pagedProducts = Products.filteredProducts.slice(begin, end);
    });
});

在服务中：

app.factory('Products', function($http, $filter, $location, $routeParams){
    var Products = {
        search: '',
        searching: false,
        filteredProducts: '',
        pagedProducts: '',
        getProduct: function(id){
            delete Products.detail;
            $http.get('/product/' + id).then(function(response){
                Products.detail = response.data.product;
            });
        },
        getProducts: function(){
            return $http.get('/product').then(function(response){
                return response.data;
            });
        },
        pagination: function(){

            // relies on fulltext filter
            this.filteredProducts = $filter('fulltext')(this.products, this.brandLimit);

            // set up default values to feed to ui pagination
            this.currentPage = 1;
            this.numPerPage = 10;
            this.maxSize = 10;

            // check the length of filtered items based on search or brand clicked (in the URL)
            this.totalItems = this.filteredProducts.length;
            this.numPages =  Math.ceil(this.totalItems / this.numPerPage);
        },
        brandTitle: function() {

            if (this.searching === false || this.brand) {
                this.search = '';
                return $routeParams.brand + " Products";
            } else {
                return 'Searching "' + $routeParams.brandLimit + '"';
            }
        },
        searchTerm: function(){
            if(this.search){
                $location.path("search/" + this.search);
                this.searching = true;
            }else{
                $location.path("/");
                this.searching = false;
            }
        }
    };
    return Products;
});

和HTML：

<pagination ng-show="Products.numPages" total-items="Products.totalItems" ng-model="Products.currentPage" max-size="Products.maxSize" class="pagination-small" boundary-links="true" rotate="false" num-pages="Products.numPages"></pagination>

<table class="table table-striped">
    <tr>
        <th>Maker</th>
        <th>Title</th>
        <th ng-bind="product.priceDealer">Dealer Price</th>
        <th>MSRP</th>
    </tr>
    <tr ng-repeat="product in Products.pagedProducts">
        <td>{{product.brand}}</td>
        <td><a href="#/product-detail/{{product.id}}/{{product.title | slug}}">{{product.title}}</a></td>
        <td ng-bind="product.priceDealer | currency"></td>
        <td>{{product.msrp | currency:"$"}}<td>
        </tr>
    </table>

制造商
标题
经销商价格
MSRP
{{产品.品牌}
{{product.msrp}货币：“$”}

不需要所有这些，使用angular UI引导的属性：

HTML ===========

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

$scope.$watch('currentPage + itemsPerPage', function () {
        var begin = (($scope.currentPage - 1) * $scope.itemsPerPage),
            end = begin + $scope.itemsPerPage;

        $scope.filteredtestimonials= $scope.alerts.slice(begin, end);
    });

请注意，您需要提到ng repeat=“FilteredEstimational中的鉴定”

属性应该和您使用ng repeat的范围相同

如果您仍然面临任何问题，请告诉我，您可以在以下网站上看到更多此类问题的示例：

包括：

---

在您的页面或布局页面中，每页的项目将不会采用直接值，似乎

这不起作用，我得到错误

错误：[$injector:unpr]未知提供程序：startFromFilterProvider

，因为我没有名为StartFrom抱歉，我错过了在回答中添加filter start的功能我真的不喜欢使用$watch，因为有办法不用它。

<pager total-items="totalItems" ng-model="currentPage" items-per-page="itemsPerPage"></pager>

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

$scope.$watch('currentPage + itemsPerPage', function () {
        var begin = (($scope.currentPage - 1) * $scope.itemsPerPage),
            end = begin + $scope.itemsPerPage;

        $scope.filteredtestimonials= $scope.alerts.slice(begin, end);
    });