在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; 
}