如何使用角度显示带有更多按钮的长文本？

Question

我有这样的长文本：-

“改善患者体验的5个简单步骤5个改善患者体验的简单步骤5个改善患者体验的简单步骤5个改善患者体验的简单步骤5个改善患者体验的简单步骤5个改善患者体验的简单步骤5个改善患者体验的简单步骤5个简单步骤改善患者体验5 改善患者体验的简单步骤5 改善患者体验的简单步骤5 改善患者体验的简单步骤5 改善患者体验的简单步骤5 改善患者体验的简单步骤5 改善患者体验的简单步骤5 改善患者体验的简单步骤5 改善患者的简单步骤体验 "

但我只需要在页面上显示 2 行和一个更多按钮来检查完整的文本。 这对 angular.js 可行吗？

如果是，你会建议我什么？

Answer 1

是的，AngularJS 完全可以做到这一点——但大多数解决方案实际上是 CSS。

您将能够主要通过 CSS 完成此操作。首先，HTML/CSS 并没有真正了解一堆文本占用多少行的概念。您可以通过在 CSS line-height 上设置容器元素的高度和文本的行高来获得所需的行为。对于您的默认状态，根据两倍行高设置高度并将overflow 设置为隐藏。然后你只需要让你的按钮有条件地应用一个扩展容器高度并将overflow设置为可见的类：

<style>
    .container {
         font-size: 16px;
         line-height: 16px;
         height: 32px;
         overflow: hidden;
    }
    .show {
         overflow: visible;
         height: auto;
    }
<div class="container" ng-class="{show: show}">
    [your text]
</div>
<button ng-click="show = true">Show text</button>

您可以花哨并让按钮也再次隐藏文本（作为切换）。

Answer 2

ng-text-truncate
https://github.com/lorenooliveira/ng-text-truncate

演示1
https://rawgit.com/lorenooliveira/ng-text-truncate/master/demo1.html

示例
<p ng-text-truncate="longTextVariable" ng-tt-chars-threshold="40"></p>

Answer 3

角度阅读更多
https://github.com/ismarslomic/angular-read-more

演示
http://codepen.io/ismarslomic/pen/yYMvrz

<div hm-read-more
        hm-text="{{ text }}" 
        hm-limit="100" 
        hm-more-text="read more" 
        hm-less-text="read less"
        hm-dots-class="dots"
        hm-link-class="links">
</div>

Answer 4

如果您希望div 根据像素高度而不是字符数截断自身，您可以试试这个。这允许您将嵌套的 HTML 放入可展开部分。

angular.module('app', [])
.controller('TestController', function($scope) {
  $scope.loremIpsum = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
})
.directive('showMore', function() {
  return {
        restrict: 'A',
        transclude: true,
        template: [
            '<div class="show-more-container"><ng-transclude></ng-transclude></div>',
            '<a href="#" class="show-more-expand">More</a>',
            '<a href="#" class="show-more-collapse">Less</a>',
        ].join(''),
        link: function(scope, element, attrs, controller) {
            var maxHeight = 45;
            var initialized = null;
            var containerDom = element.children()[0];
            var $showMore = angular.element(element.children()[1]);
            var $showLess = angular.element(element.children()[2]);

            scope.$watch(function () {
                // Watch for any change in the innerHTML. The container may start off empty or small,
                // and then grow as data is added.
                return containerDom.innerHTML;
            }, function () {
                if (null !== initialized) {
                    // This collapse has already been initialized.
                    return;
                }

                if (containerDom.clientHeight <= maxHeight) {
                    // Don't initialize collapse unless the content container is too tall.
                    return;
                }

                $showMore.on('click', function () {
                    element.removeClass('show-more-collapsed');
                    element.addClass('show-more-expanded');
                    containerDom.style.height = null;
                });

                $showLess.on('click', function () {
                    element.removeClass('show-more-expanded');
                    element.addClass('show-more-collapsed');
                    containerDom.style.height = maxHeight + 'px';
                });

                initialized = true;
                $showLess.triggerHandler('click');
            });
        },
  };
});

.show-more-container {
    overflow: hidden;
}

.show-more-collapse, .show-more-expand {
    text-align: center;
    display: none;
}

.show-more-expanded > .show-more-collapse {
    display: inherit;
}

.show-more-collapsed > .show-more-expand {
    display: inherit;
}

<script src="https://code.angularjs.org/1.5.8/angular.js"></script>
<div ng-app="app" ng-controller="TestController">
  <div show-more>
    All sorts of <strong>stuff</strong> can go in here.
    {{ loremIpsum }}
    <div>Even more divs</div>.
  </div>
  
  <div show-more>
    This <strong>won't</strong> truncate.
  </div>
</div>

Answer 5

我认为有一个更简单的方法。
只需将{{text}} 替换为{{text | limitTo: 150}}，然后在下面创建简单的阅读更多 链接。