如何在我的情況下正確顯示/隱藏按鈕？

我正在嘗試爲我的應用程序構建「顯示更多」按鈕，並且遇到了問題。如何在我的情況下正確顯示/隱藏按鈕？

我有一個指令做的東西，當用戶點擊閱讀更多的按鈕

(function(window, angular) { 
    var app = angular.module('myApp'); 
    app.directive('readMore', [ 
     function() { 
      return { 
       restrict: 'A', 
       template:'<a class="read-more-button"></a>', 
       link: function(scope, element) {       
        element.bind('click', function(){ 
         // do stuff 
        }) 
       } 
      }; 
     } 
    ]); 
})(window, angular);

的Html

<div id="container"> 
    <div ng-repeat="item in items"> 
     {{item.description}} 
    </div> 
</div> 
<a ng-show="items.length > 10" read-more href="#"></a> 
//only show read more button when I have more than 10 items

CSS：

#container { 
    height: 250px; 
    overflow: hidden; 
}

的問題是有時一個item.description已久文本和我的#container格只能容納8項和其餘被隱藏。我不想數這些字母，因爲我認爲這不切合實際。有沒有什麼辦法解決這一問題？謝謝您的幫助！

更新：

期望的結果將是：當點擊閱讀更多的按鈕，股利規模將擴大到什麼是應該的。目前只有當應用程序包含> 10個項目時，纔會顯示「讀取更多」按鈕。我的問題是如何正確顯示/隱藏閱讀更多的按鈕，當8項目文本已經填寫250px的div但我實際上有9項（所以它應該顯示更多按鈕，但因爲它只有9項，閱讀更多按鈕不會顯示。）

底線是：我需要知道什麼時候，以顯示當#container的DIV充滿文本我不管有多少條目

來源

2015-10-14 FlyingCat

我不清楚你的問題是什麼。首先，「更多閱讀」是做什麼的？它擴大'＃容器'div還是它加載更多'物品'？其次，你的問題是關於如何顯示8個項目，而不管'item.description'文本大小？ –

因此，是否有關如何使用Angular做到這一點的問題，假設您可以計算相對於容器大小的內容大小？或者是這個問題，如何判斷溢出是否發生？後者在我看來過於寬泛（而且不是非常與Angular相關） –

@NewDev我需要知道什麼時候顯示更多按鈕，當#container div充滿文本時，無論我有多少項。 – FlyingCat

我認爲，我們需要關於你的CSS

#container { 
height: 250px; 
overflow: hidden;}

討論這意味着你要修復高度250像素，如果conntent在#container的有身高比250像素，那麼這將是隱藏多餘的部分。

所以有時單個item.description有長文本，你只能看到8或7或6個項目，這是正確的。

也許有兩種方法：

如果你要修復高度250像素。您可以更改溢出：隱藏;至溢出：滾動;。你會看到所有10個項目，但div有滾動。
如果您不想將高度固定爲250像素。您可以更改爲

'#container {height：auto; 溢出：可見;}

希望它有幫助。

來源

2015-10-15 02:03:41

讓我得到大家的提問更多按鈕，你想能夠檢測固定寬度div的內容是否填充或溢出div（無論內容的數量是多少，因爲它們可能具有不同的大小），如果是，則顯示讀取更多按鈕？

如果是檢查這個線程了，它有同樣的問題，與樣品JavaScript片段做，你可以調整到您的上述角度指令的檢查：

javascript css check if overflow

來源

2015-10-15 00:40:19 arislan

如何在我的情況下正確顯示/隱藏按鈕？

回答

相關問題