私はTwitterを使用するWebアプリケーションを実装しています。最後の要素を隠すhtmlテーブルを「ページングする」方法はありますか？
ユーザーのつぶやきを含む1つの表が1つあります。私はテーブルのつぶやきの数を制限し、残りの部分を隠したいと思うし、ユーザーが望むなら、より多くのつぶやきを表示したい。公式の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="[email protected]" 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>
ありがとうございました!!!シンプルで簡単で効果的なソリューションです！ –