我怎样才能重复显示接下来的15个项目
How can I show next 15 items in ng-repeat?
我目前正在使用angular ng repeat。
当用户点击一个写着"下一个15"的按钮时,我想显示下一个的15个项目。我不想从数组中弹出项目,我只想隐藏前15个,并将显示限制在后15个。
此外,当用户点击"上一个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>
类似以下内容将允许您保持视图整洁和逻辑可测试:
// 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
相关文章:
- 我怎样才能重复显示接下来的15个项目
- 接下来选择与筛选器匹配的选项
- 我在下拉列表中尝试了下一个和前五年的html代码.接下来的5年我都过得很好.我怎样才能拿到之前的5年
- 希望在单击href链接时显示我的广告
- 接下来 标记
- 如何调用日期函数并在接下来的 6 天插槽中显示
- 单击链接后显示加载程序
- 日期选择器如何跳过接下来的5天
- 如何在跟随链接之前显示(DOM)消息
- 在这种情况下,如何更改接下来3个兄弟姐妹的类别
- 如何在访问者第二次单击链接时显示不同的页面
- 在不同的链接上显示不同的文本
- 推特推文链接未显示
- 我想创建一个 chrome 扩展程序来获取页面中的所有链接并显示它们
- 我制作了自己的jquery选项卡版本,但我需要外部链接来显示选项卡内容和样式原始导航
- 如何使切换台面板的链接反映“显示”类
- 滚动过程中的错误行为,根据代码的链接方式显示
- JavaScript 将类添加到接下来的 7 个元素中
- Javascript 显示接下来 15 分钟间隔的时间
- 我正在尝试使用表单选择选项获取当前日期,并在提交时显示接下来的七天