如何在ng-repeat中显示下15个项目？

我目前正在使用角度ng-repeat。如何在ng-repeat中显示下15个项目？

当用户点击一个按钮，上面写着“下一步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; 
    }; 
});

来源

2015-04-05 frontich

角度版本，你的工作？ – 2015-04-05 14:13:22

版本是1.3.15 – frontich 2015-04-05 14:14:58

这将有助于http://stackoverflow.com/questions/14796087/filter-results-6-through-10-of-100-with-ng-repeat-in-angularjs – 2015-04-05 14:15:39

在这里你去 - 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>

来源

2015-04-05 14:53:52

我需要显示记录从16到30，而不是从1到30，作为你的例子（和我的:)），这是下一个15的整点。我不想显示30，我只想显示下一个15并隐藏以前的15 ...这是我正在寻找的解决方案 – frontich 2015-04-05 15:02:30

@frontich查看更新的Plunker。 :-)请注意，它显示0-> 14,15-> 29等 – 2015-04-05 15:15:57

谢谢你mr camden_kid这是我正在寻找的解决方案。赞赏:) – frontich 2015-04-05 15:26:21

像下面的内容将让你保持你的看法整齐，你的逻辑可测试：

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

来源

2015-04-05 15:03:51 pdoherty926

如何在ng-repeat中显示下15个项目？

回答

相关问题