如何在 ng-repeat 中显示接下来的 15 个项目？答案

【问题标题】：How can I show next 15 items in ng-repeat?如何在 ng-repeat 中显示接下来的 15 个项目？
【发布时间】：2015-04-06 09:50:09
【问题描述】：

我目前正在使用角度 ng-repeat。

当用户单击“下一个 15”按钮时，我想显示下 15 个项目。我不想从数组中弹出项目，我只想隐藏前 15 个，并将显示限制为接下来的 15 个。

另外，当用户点击“Prev 15”时，我想只显示前 15 个项目。

这是我目前所拥有的：

HTML：

<div ng-controller="ctrlIndex as vm">


    <ul ng-repeat=" item in vm.items | limitTo: 15 * vm.page
                                 | limitTo: 15 * vm.page < count ? limitTo: 15 * vm.page : 15 - (15 * vm.page - count)"/>
        <li>{{ item }}</li>
    </ul>
<div><button ng-click="vm.next()">Next 15</button></div>
<div><button ng-click="vm.back()">Prev 15</button></div>

Javascript：

 var app = angular.module('app', []);

 3app.controller('ctrlIndex', function(){

    var vm = this;
    vm.numRecords = 15;
    vm.page = 1;

    vm.items = []
    for (var i = 0; i < 1000000; ++i) {
        vm.items.push('item : ' + i);
    }

    vm.next = function(){
        vm.page = vm.page + 1;
    };

    vm.back = function(){
        vm.page = vm.page - 1;
    };
});

【问题讨论】：

您使用的角度版本？
版本为1.3.15
这将有助于stackoverflow.com/questions/14796087/…
是的，我已经阅读了这篇文章，但仍然找不到解决方案。它不隐藏项目，它只显示 15 个，然后再显示 15 个，依此类推。这不是我要找的。如果我从数组中弹出项目，我可以做到，但这也不是我想要的。我需要一个角度内的解决方案

标签： javascript angularjs angularjs-scope angularjs-ng-repeat angular-ui

【解决方案1】：

给你 - Plunker

标记

<body ng-app="app">
    <div ng-controller="ctrlIndex as vm">
        <ul ng-repeat="item in vm.items track by $index"
      ng-show="(($index < (vm.page * vm.numRecords)) && ($index >= ((vm.page - 1) * vm.numRecords)))">
            <li>{{ item }}</li>
        </ul>

        <div><button ng-click="vm.next()">Next 15</button></div>
        <div><button ng-click="vm.back()">Prev 15</button></div>
    </div>
</body>

【讨论】：

我需要显示从 16 到 30 的记录，而不是从 1 到 30 的记录，就像您的示例（和我的 :)）那样，这就是接下来 15 的重点。我不想显示 30 ，我只想显示下一个 15 并隐藏前 15 个......这就是我正在寻找的解决方案
@frontich 查看更新的 Plunker。 :-) 请注意，它显示 0->14、15->29 等。
谢谢 camden_kid 先生，这是我一直在寻找的解决方案。赞赏:)

【解决方案2】：

以下内容可以让您保持视图整洁并让您的逻辑可测试：

   // controller
   var vm = this;
   vm.numRecords = 15;
   vm.page = 0;
   vm.items = [];
   vm.data = {};
   vm.data.shownItems = [];
   vm.limit = 100;
   vm.maxPages = Math.floor(vm.limit / vm.numRecords);

   for (var i = 0; i < vm.limit; ++i) {
     vm.items.push('item : ' + i);
   }

   vm.data.shownItems = vm.items.slice(0, this.numRecords);

   vm.next = function() {
     if (vm.page >= vm.maxPages) {
       return
     }
     vm.page += 1;
     var begin = vm.page * vm.numRecords;
     var end = begin + vm.numRecords;
     vm.data.shownItems = vm.items.slice(begin, end);
   };

   vm.back = function() {
     if (vm.page <= 0) {
       return
     }
     vm.page -= 1;
     var begin = vm.page * vm.numRecords;
     var end = begin + vm.numRecords;
     vm.data.shownItems = vm.items.slice(begin, end);
   };

// view
<ul ng-repeat="item in vm.data.shownItems">
    <li>{{ item }}</li>
</ul>

Plunker

【讨论】：