我正在实现一个使用 Twitter 的 Web 应用程序。
我有一个表，其中有一列包含用户的推文。我想限制表的推文数量并隐藏其余部分，如果用户愿意，则显示更多推文。概念类似于官方 Twitter 应用程序。
我认为分页是一个错误的概念。
如何使用 HTML 和 Angular js 做到这一点？
最佳答案
您可以使用 ng-repeat 上提供的 limitTo 过滤器来限制数据的初始加载，并在加载更多后，您可以加载下一个项目。
工作 Plnkr - http://plnkr.co/edit/CXYwDVJFYgje6tMdEKAq?p=preview
以下代码将允许您添加更多推文，一旦没有更多推文，它也会更改按钮文本。
片段-
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.data = [
{id: 1, tweet: 'This is tweet 1 - ies, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing.'},
{id: 2, tweet: 'This is tweet 2 - ies, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop .'},
{id: 3, tweet: 'This is tweet 3 - ies, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus Papsum.'},
{id: 4, tweet: 'This is tweet 4 - ies, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus versions of Lorem Ipsum.'},
{id: 5, tweet: 'This is tweet 5 - ies, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.'},
{id: 6, tweet: 'This is tweet 6 - ies, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus.'},
{id: 7, tweet: 'This is tweet 7 - ies, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop.'},
{id: 8, tweet: 'This is tweet 8 - ies, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently.'},
{id: 9, tweet: 'This is tweet 9 - ies, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop.'},
{id: 10, tweet: 'This is tweet 10 - ies, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop.'}
];
$scope.limit = 2;
$scope.showMore = function() {
$scope.limit += 2;
};
});<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<h3 ng-bind="title"></h3>
<ul>
<li ng-repeat="item in data | limitTo: limit">
<div style="margin: 5px;padding: 5px;border: 1px solid green;">{{item.tweet}}</div>
</li>
</ul>
<button ng-click="showMore()" ng-bind="limit !== data.length ? 'Load More' : 'No More Tweets'"></button>
</body>
</html>关于javascript - 有没有办法用 Angular "pagin"html 表隐藏最后一个元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45899436/