如何在我的情况下正确显示/隐藏按钮?
问题描述:
我正在尝试为我的应用程序构建“显示更多”按钮,并且遇到了问题。如何在我的情况下正确显示/隐藏按钮?
我有一个指令做的东西,当用户点击阅读更多的按钮
(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充满文本我不管有多少条目
答
我认为,我们需要关于你的CSS
#container {
height: 250px;
overflow: hidden;}
讨论这意味着你要修复高度250像素,如果conntent在#container的有身高比250像素,那么这将是隐藏多余的部分。
所以有时单个item.description有长文本,你只能看到8或7或6个项目,这是正确的。
也许有两种方法:
- 如果你要修复高度250像素。 您可以更改溢出:隐藏;至溢出:滚动;。你会看到所有10个项目,但div有滚动。
-
如果您不想将高度固定为250像素。 您可以更改为
'#container {height:auto; 溢出:可见;}
希望它有帮助。
答
让我得到大家的提问更多按钮,你想能够检测固定宽度div的内容是否填充或溢出div(无论内容的数量是多少,因为它们可能具有不同的大小),如果是,则显示读取更多按钮?
如果是检查这个线程了,它有同样的问题,与样品JavaScript片段做,你可以调整到您的上述角度指令的检查:
我不清楚你的问题是什么。首先,“更多阅读”是做什么的?它扩大'#容器'div还是它加载更多'物品'?其次,你的问题是关于如何显示8个项目,而不管'item.description'文本大小? –
因此,是否有关如何使用Angular做到这一点的问题,假设您可以计算相对于容器大小的内容大小?或者是这个问题,如何判断溢出是否发生?后者在我看来过于宽泛(而且不是非常与Angular相关) –
@NewDev我需要知道什么时候显示更多按钮,当#container div充满文本时,无论我有多少项。 – FlyingCat