如何用角度显示多按钮的长文本?

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个简单的步骤来改善病人Experience5简单的步骤来改善病人Experience5简单的步骤来改善病人Experience5简单的步骤来改善病人Experience5简单的步骤来改善病人Experience5简单的步骤来改善病人Experience5简单的步骤来改善病人Experience5简单的步骤来改善病人Experience5简单的步骤来改善病人Experience5简单的步骤来改善病人Experience5简单的步骤来改善病人Experience5简单的步骤改善病人体验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行，并需要一个更多的按钮来检查完整的文本。这个位置是角的吗?js ?

if yes What would you suggest me ?

如果是的话，你有什么建议吗?

4 个解决方案

#1

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 overflow to hidden. Then you just need have your button conditionally apply a class that expands the height of the container and sets the overflow to visible:

你可以通过CSS来实现这一点。首先，HTML/CSS并没有一个概念来说明一堆文本要占用多少行。您可以通过在CSS行高度上设置容器元素的高度和文本的行高度来获得所需的行为。对于默认状态，将高度设置为线高的两倍，并将溢出设置为隐藏。然后，您只需让按钮有条件地应用一个类，该类扩展容器的高度，并将溢出设置为可见:

<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).

你可以想象一下，让按钮再次隐藏文本(作为切换)。

#2

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 >

#3

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

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>

#4

If you'd prefer to have a div that 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>