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

I am trying to build a 'show more' button for my app and I have encountered an issue.

我正在尝试为我的应用程序构建一个“显示更多”按钮,但我遇到了一个问题。

I have a directive to do stuff when user click read more button

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

(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;
}

The problem is sometimes a single item.description has long texts and my #container div can only hold 8 items and the rests are hidden. I don't want to count the letters because I thought that's not practical. Is there anyway to fix this? Thanks for the help!

问题有时是单个项目。描述有长文本,我的#container div只能容纳8个项目,并且休息是隐藏的。我不想数字,因为我觉得这不实用。有没有什么办法解决这一问题?谢谢您的帮助!

Update:

The desired result will be: When click read more button, the div size will expand to whatever it should be. Currently the read more button will show only if the app has > 10 items. My question is how to show/hide read more button properly when 8 items texts already fill 250px div but I actually have 9 items (so it should show read more button but since it only has 9 items, the read more button won't show.)

所需的结果将是:当单击“读取更多”按钮时,div大小将扩展为应有的大小。目前,仅当应用程序有> 10个项目时,才会显示更多阅读按钮。我的问题是当8个项目文本已经填充250px div时如何正确显示/隐藏阅读更多按钮但我实际上有9个项目(所以它应该显示更多按钮但由于它只有9个项目,所以阅读更多按钮不会显示。)

The bottom line is: I need to know when to show read more button when the #container div is filled with texts regardless how many items I have

底线是:当#container div填充文本时我需要知道何时显示更多按钮,无论我有多少项目

2 个解决方案

#1

I think that we need discuss about your CSS

我认为我们需要讨论你的CSS

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

It means that you want to fix height as 250px and if conntent in #container has height than 250px then it will be hide redundant part.

这意味着你想要将高度固定为250px,如果#container中的conntent高度超过250px,那么它将隐藏冗余部分。

So sometime a single item.description has long texts you only see 8 or 7 or 6 items, that is correct.

所以有时一个item.description有长文本你只能看到8或7或6个项目,这是正确的。

Maybe have two ways to do:

也许有两种方法可以做:

If you want to fix height as 250px. You can change overflow: hidden; to overflow:scroll;. You will see all 10 items but div has scroll.

如果你想将高度固定为250px。你可以改变溢出:隐藏;溢出:滚动;您将看到所有10个项目,但div有滚动。

If you don't want to fix height as 250px. You can change to

如果您不想将高度固定为250px。你可以改为

'#container{height:auto; overflow:visible;}

Hope it helps.

希望能帮助到你。

#2

Let me get your questions right, you want to be able to detect if the content of a fixed width div fills or overflows the div (regardless of the number of contents as they may have different sizes), and if so show a read more button?

让我正确地回答你的问题,你希望能够检测到固定宽度div的内容是否填充或溢出div(无论内容的数量是多少,因为它们可能有不同的大小),如果是,则显示更多按钮?

If so check this thread out, it has the same problem, with a sample javascript snippet to do the checking which you can adapt into your angular directive above:

如果是这样检查这个线程,它有同样的问题,有一个示例javascript片段进行检查,你可以适应你的角度指令上面:

javascript css check if overflow

javascript css检查是否溢出

#1