在angularjs中查看更多/更少的元素

Question

我不想在列表中顯示前20個字符。然後看看更多/看到更少的按鈕來顯示和隱藏所有元素。

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> 

然後在你的控制器做出切換相冊更多>>暫變量的函數

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