如何在我的情况下正确显示/隐藏按钮？

我正在尝试为我的应用程序构建“显示更多”按钮，并且遇到了问题。如何在我的情况下正确显示/隐藏按钮？

我有一个指令做的东西，当用户点击阅读更多的按钮

(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

如何在我的情况下正确显示/隐藏按钮？

回答

相关问题