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

然后在你的控制器中使函数切换showMore变量

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