角度を使って長いテキストをより多くのボタンで表示する方法は？

Question

私はそのような長いテキストを持っている： - 改善するために、患者Experience5の簡単なステップを改善するために、患者Experience5の簡単な手順を改善するために、患者Experience5の簡単な手順を改善するために、患者Experience5の簡単な手順を改善するために、患者Experience5の簡単な手順を改善するために

「5つの簡単なステップを患者体験5患者体験を改善する簡単なステップ5患者体験を改善する簡単なステップ5患者体験を改善するための簡単なステップ5患者体験を改善するための簡単なステップ5患者体験を改善する簡単なステップ5患者体験を改善するための簡単なステップ5患者体験を改善するための簡単なステップ5患者体験を改善する簡単なステップ患者体験を改善するための簡単なステップ "

しかし、ページに表示するには2行、完全なテキストを確認するにはさらにボタンが必要です。 これはangular.jsで表示されますか？

はいの場合はどうすればよいですか？

Answer 1

はい、これはAngularJSでは完全に可能ですが、ソリューションのほとんどは実際にはCSSです。

これは主にCSSを通じて実行できます。まず、HTML/CSSには、実際にテキストの束がどれくらいの行を占めているかというコンセプトはありません。 CSSのline-heightで、コンテナ要素の高さとテキストの行の高さを設定することで、適切な動作を得ることができます。デフォルトの状態では、行の高さの2倍に基づいて高さを設定し、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> 

あなたは空想取得し、ボタンも（トグルとして）もう一度テキストを隠すことができます。

Answer 2

NG-テキスト切り捨てる
https://github.com/lorenooliveira/ng-text-truncate

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

例

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

Answer 3

角度-読み取りより
https://github.com/ismarslomic/angular-read-more

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

あなたがピクセルの高さの代わりに、文字数に基づいて自身を切り捨て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>