angularjsの要素をより多く/少なく表示

Question

単語の最初の20文字をリストに表示することはできません。次に、すべての要素を表示したり非表示にするには、see more/see lessボタンを表示します。

Answer 1

あなたは文字の制限を設定し、上またはクリックでオフリミットを設定し、あなたのコントローラ内の機能を持たせるlimitToを使用することができます。

<ul controller="YourController as ctrl"> 
    <li ng-repeat="item in ctrl.allYourItems"> 
    <span ng-if="!ctrl.showMore"> 
     {{ctrl.wordsVar | limitTo: 20 }}{{ctrl.wordsVar.length > 20 ? '&hellip;' : ''}} 
     <a class="button" ng-click="ctrl.showMoreLess()">Show More</a> 
    </span> 
    <span ng-if="ctrl.showMore"> 
     {{ctrl.wordsVar}} 
     <a class="button" ng-click="ctrl.showMoreLess()">Show Less</a> 
    </span> 
    </li> 
</ul> 

は、その後、あなたのコントローラ内の変数showMoreを切り替える機能を作る

vm.showMoreLess = function() { 
    vm.showMore = !vm.showMore; 
}