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

how to show long text with more button using angular?

提问by Er KK Chopra

i have long text like that :-

我有这么长的文字：-

"5 Simple Steps to Improve Patient Experience5 Simple Steps to Improve Patient Experience5 Simple Steps to Improve Patient Experience5 Simple Steps to Improve Patient Experience5 Simple Steps to Improve Patient Experience5 Simple Steps to Improve Patient Experience5 Simple Steps to Improve Patient Experience5 Simple Steps to Improve Patient Experience5 Simple Steps to Improve Patient Experience5 Simple Steps to Improve Patient Experience5 Simple Steps to Improve Patient Experience5 Simple Steps to Improve Patient Experience5 Simple Steps to Improve Patient Experience5 Simple Steps to Improve Patient Experience5 Simple Steps to Improve Patient Experience5 Simple Steps to Improve Patient Experienc "

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

But i need only 2 line to show on page and a more button to check complete text. Is this posible with angular.js ?

但我只需要 2 行显示在页面上，还有一个更多按钮来检查完整的文本。这可以与 angular.js 一起使用吗？

if yes What would you suggest me ?

如果是，你有什么建议？

回答by Benmj

Yes, this is totally possible with AngularJS -- but most of the solution is actually CSS.

是的，这在 AngularJS 中是完全可能的——但大多数解决方案实际上是 CSS。

You'll be able to do this mostly through CSS. First, HTML/CSS doesn't really have a concept for how many lines a bunch of text is taking up. You can get the behavior you want by setting the height of a container element and the line-height of your text on the CSS line-height. For your default state, set the height based on two times your line height and set the overflowto hidden. Then you just need have your button conditionally apply a class that expands the height of the container and sets the overflowto visible:

您将能够主要通过 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>

You can get fancy and make the button also hide the text again (as a toggle).

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

回答by Stephen Cernota

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

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

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

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

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

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

回答by Stephen Cernota

angular-read-more
https://github.com/ismarslomic/angular-read-more

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

Demo
http://codepen.io/ismarslomic/pen/yYMvrz

演示
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>

回答by Matt Janssen

If you'd prefer to have a divthat truncates itself based on pixel height instead of character count, you can try this. This allows you to put nested HTML in your expandable section.

如果您更喜欢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>

回答by Md Zahid Shams

I think there is an easier way.
Just replace {{text}}with {{text | limitTo: 150}}, and then create below simple read morelink.

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