Как показать длинный текст с большей кнопкой, используя angular?

У меня длинный текст:

"5 простых шагов для улучшения опыта пациентов5 Простые шаги для улучшения опыта пациентов5 Простые шаги для улучшения опыта пациентов5 Простые шаги для улучшения опыта пациентов5 Простые шаги для улучшения опыта пациентов5 Простые шаги для улучшения опыта пациентов5 Простые шаги по улучшению опыта пациентов5 Простые шаги для Улучшить опыт пациентов5 Простые шаги для улучшения опыта пациентов5 Простые шаги для улучшения опыта пациентов5 Простые шаги для улучшения опыта пациентов5 Простые шаги для улучшения опыта пациентов5 Простые шаги для улучшения опыта пациентов5 Простые шаги для улучшения опыта пациентов5 Простые шаги для улучшения опыта пациентов5 Простые шаги для улучшения состояния пациента Experienc"

Но мне нужно всего две строки, чтобы показать на странице, и еще одну кнопку, чтобы проверить полный текст. Возможно ли это с angular.js?

Если да, то что бы вы мне предложили?

ОТВЕТЫ

Ответ 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>

Вы можете получить фантазию и заставить кнопку снова скрыть текст (в качестве переключателя).

Ответ 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>

Ответ 5

Как я этого добился

Шаг 1:

<button type="button" (click)="alterDescriptionText()">
   { showShortDesciption ? 'SHOW ALL': 'SHOW LESS' }}
 </button>

Шаг 2: (в вашем файле .component.ts)

 showShortDesciption = true

 alterDescriptionText() {
    this.showShortDesciption = !this.showShortDesciption
 }

Шаг 3:

<div [ngClass]="{'show-less': showShortDesciption}">
      <!-- Your Text Here -->
</div

Шаг 4:

.show-less {
    height: 4rem;
    overflow: hidden;
    padding: 1rem;
}

В основном я изменяю высоту div по нажатию кнопки

Ответ 6

Я думаю, что есть более простой способ.
Просто замените {{text}} на {{text | limitTo: 150}} {{text | limitTo: 150}}, а затем создайте ниже простую ссылку "читать дальше".