有沒有什麼辦法可以「隱藏」隱藏Angular的最後一個元素的html表格？

我正在實施使用Twitter的Web應用程序。有沒有什麼辦法可以「隱藏」隱藏Angular的最後一個元素的html表格？

我有一個包含用戶推文的單個列的表。我想限制表格的推文數量並隱藏其餘部分，如果用戶想要，則顯示更多推文。這個概念類似於官方的Twitter應用程序。

我認爲分頁是一個錯誤的概念。

我該如何使用HTML和Angular js來做到這一點？

來源

2017-08-26 Daniel Rueda

您可以使用limitTo上的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>

來源

2017-08-26 21:46:50 swapnesh

非常感謝您！這是一個簡單，容易和有效的解決方案！ –

有沒有什麼辦法可以「隱藏」隱藏Angular的最後一個元素的html表格？

回答

相關問題