javascript - 如何在 ng-repeat 中显示接下来的 15 个项目?

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

我目前正在使用 Angular 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;
    };
});

最佳答案

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

关于javascript - 如何在 ng-repeat 中显示接下来的 15 个项目?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29458177/

相关文章:

visual-studio - 在 Visual Studio 中缩小和捆绑 AngularJS

javascript - AngularJS 内容和谷歌

javascript - 如何使用 flexbox 使所有标签的高度相同?

angularjs - 如何在 Jasmine 中模拟 $scope.variables

angularjs - Node JS 中的 Angular CryptoJs 加密而不是解密 CryptoJS

javascript - 在 AngularJS 中将对象从指令发送到父 Controller

javascript - 在提交调试之前显示表单值

javascript - 如何在当前网页上创建和显示自己设计的窗口而不是弹出窗口?

html - table-striped 在与 angular js 一起使用时不起作用

javascript - angular.js 指令 templateUrl 无法绑定(bind)范围