wie lange text mit mehr taste mit eckigen zeigen?

Question

ich habe lange Text wie folgt aus: -

„5 einfachen Schritten Patient Experience5 einfache Schritte zur Verbesserung der Patienten Experience5 einfache Schritte zur Verbesserung der Patienten Experience5 einfache Schritte zur Verbesserung der Patienten Experience5 einfache Schritte zur Verbesserung der Patienten Experience5 einfache Schritte zur Verbesserung zu Verbessern Patientenerfahrung5 Einfache Schritte zur Verbesserung der Patientenerfahrung5 Einfache Schritte zur Verbesserung der Patientenerfahrung5 Einfache Schritte zur Verbesserung der Patientenerfahrung5 Einfache Schritte zur Verbesserung der Patientenerfahrung5 Einfache Schritte zur Verbesserung der Patientenerfahrung5 Einfache Schritte zur Verbesserung der Patientenerfahrung5 Einfache Schritte zur Verbesserung der Patientenerfahrung5 Einfache Schritte zur Verbesserung der Patientenerfahrung5 Einfache Schritte zur Verbesserung der Patientenerfahrung5 Einfache Schritte zur Verbesserung der Patientenerfahrung "

Aber ich brauche nur 2 Zeile auf der Seite und eine weitere Schaltfläche, um den vollständigen Text zu überprüfen. Ist das möglich mit angular.js?

wenn ja Was würden Sie mir vorschlagen?

Answer 1

Ja, das ist mit AngularJS völlig möglich - aber die Lösung ist eigentlich CSS.

Sie können dies meist über CSS tun. Erstens, HTML/CSS hat nicht wirklich ein Konzept dafür, wie viele Zeilen ein Bündel Text aufnimmt. Sie können das gewünschte Verhalten erzielen, indem Sie die Höhe eines Containerelements und die Zeilenhöhe Ihres Textes auf der CSS-Seite line-height festlegen. Legen Sie für Ihren Standardstatus die Höhe basierend auf dem Zweifachen Ihrer Zeilenhöhe fest, und legen Sie overflow als ausgeblendet fest. Dann brauchen Sie nur Ihre Schaltfläche bedingt eine Klasse anwenden müssen, die die Höhe des Behälters erweitert und setzt die overflow zu sehen:

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

Sie Lust bekommen und machen Sie die Taste auch den Text wieder auszublenden (als Toggle) .

Answer 2

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

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

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

Answer 3

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

Wenn Sie eine div haben würde es vorziehen, die sich Höhe basierend auf Pixel kürzt statt Zeichenzahl, können Sie dies versuchen. Auf diese Weise können Sie verschachtelten HTML-Code in Ihren erweiterbaren Abschnitt einfügen.

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>