jak wyświetlić długi tekst z większą liczbą przycisków za pomocą kątowego?

Question

mam długi tekst tak: -

„5 prostych kroków, aby poprawić pacjenta Experience5 Proste kroki w celu poprawy pacjenta Experience5 Proste kroki w celu poprawy pacjenta Experience5 Proste kroki w celu poprawy pacjenta Experience5 Proste kroki w celu poprawy pacjenta Experience5 proste kroki, aby poprawić Doświadczenie pacjenta5 Proste kroki w celu poprawy doświadczenia pacjenta5 Proste kroki w celu poprawy doświadczenia pacjenta5 Proste kroki w celu poprawy doświadczenia pacjenta5 Proste kroki w celu poprawy doświadczenia pacjenta5 Proste kroki w celu poprawy doświadczenia pacjenta5 Proste kroki w celu poprawy doświadczenia pacjenta5 Proste kroki w celu poprawy doświadczenia pacjenta5 Proste kroki w celu poprawy doświadczenia pacjenta5 Proste kroki w celu poprawy doświadczenia pacjenta5 Proste kroki w celu poprawy doświadczenia pacjenta "

Potrzebuję tylko 2 linii do pokazania na stronie i więcej przycisku do sprawdzenia kompletnego tekstu. Czy to jest posible z angular.js?

jeśli tak Co byś mi zasugerował?

Answer 1

Tak, jest to całkowicie możliwe z AngularJS - ale większość rozwiązania to w rzeczywistości CSS.

Będziesz mógł to zrobić głównie poprzez CSS. Po pierwsze HTML/CSS nie ma pojęcia, ile linii zajmuje cały tekst. Możesz uzyskać pożądane zachowanie, ustawiając wysokość elementu kontenera i wysokość linii tekstu na CSS line-height. Dla swojego stanu domyślnego ustaw wysokość na podstawie dwukrotności wysokości twojej linii i ustaw ukryty overflow. Wtedy po prostu trzeba mieć swój przycisk warunkowo zastosować klasę, która rozszerza wysokość pojemnika i ustawia overflow się widoczny:

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

można uzyskać ozdobnego i uczynić przycisk również ukryć tekst ponownie (jak przełączyć) .

Answer 2

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

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

Przykład
<p ng-text-truncate="longTextVariable" ng-tt-chars-threshold="40"></p>

Answer 3

skośne odczytu więcej
https://github.com/ismarslomic/angular-read-more

Demo
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

Jeśli wolisz mieć div że obcina się na podstawie wysokości pikseli zamiast liczby znaków, można spróbować. Pozwala to umieścić zagnieżdżony kod HTML w sekcji rozwijanej.

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>