我正在实现一个使用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>