Question

我正在努力建立更多＆＃39;我的应用程序的按钮，我遇到了一个问题。

当用户点击阅读更多按钮

时，我有一个指令来做事

(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 div只能容纳8个项目并且其余部分是隐藏的。我不想数字，因为我觉得这不实用。有没有什么办法解决这一问题？谢谢您的帮助！

更新

所需的结果将是：当单击“读取更多”按钮时，div大小将扩展为应有的大小。目前，仅当应用具有＆gt;时，才会显示更多阅读按钮。 10项。我的问题是当8个项目文本已经填充250px div时如何正确显示/隐藏阅读更多按钮但我实际上有9个项目（所以它应该显示更多按钮，但因为它只有9个项目，所以阅读更多按钮赢了＆＃39; t show。）

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

Answer 1

让我回答你的问题，你希望能够检测到固定宽度div的内容是否填充或溢出div（无论内容的数量是多少，因为它们可能有不同的大小），如果是这样，则显示阅读更多按钮？

如果是这样检查这个帖子，它有同样的问题，有一个示例javascript片段来进行检查，你可以适应你上面的角度指令：

javascript css check if overflow

Answer 2

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

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

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

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

也许有两种方法可以做：

如果您想将高度固定为250px。您可以更改 溢出：隐藏 ;到溢出：滚动 ;.您将看到所有10个项目，但div已滚动。
如果您不想将高度固定为250px。您可以更改为

“＃容器{高度：汽车; 溢出：可见;}

希望它有所帮助。

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

2 个答案: