如何在angular中显示/隐藏多个项目列表

How to show / hide a multiple list of items in angular

本文关键字：隐藏 项目 列表 显示 angular      更新时间：2023-09-26

我有多个ul列表，使用ng-repeat。最初我需要显示4个项目，然后我必须显示剩余的项目。

要求:

  1. 如果第1个ul只有1个项目，那么应该显示第2个ul 3个项目中的项目，然后点击显示第2个ul的更多剩余项目。
  2. 如果第一个ul有超过4个项目，那么点击显示更多剩余的项目，包括第二个ul应显示。
  3. 想要一个通用的方式，以便它应该支持n个ul的数量，如果添加

目前，它显示了两个ul与4个项目，每个在加载点击显示更多，它显示了最后一个列表项目在两个ul块。

这是我尝试过的:

HTML:

<div ng-controller="myCtrl">
    <b>With more than 4 items:</b>
    <ul>
        <li ng-repeat="item in manyItems | limitTo:limit2">{{item}}</li>
    </ul>
    <ul>
        <li ng-repeat="item in manyItems | limitTo:limit2">{{item}}</li>
    </ul>
    <button ng-click="setLimit2(4)"
            ng-disabled="(limit2===4)||(manyItems.length<=4)">
        Show few
    </button>
    <button ng-click="setLimit2(0)"
            ng-disabled="manyItems.length<=limit2">
        Show all
    </button>
</div>

JS: 

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
    /* Config 2 */
    $scope.manyItems = ['item 1', 'item 2', 'item 3','item 4', 'item 5'];
    $scope.limit2 = 4;
    $scope.setLimit2 = function (lim) {
        $scope.limit2 = (lim <= 0) ? $scope.manyItems.length : lim;
    };
});

小提琴演示

您可以尝试以下代码:

<div ng-controller="myCtrl">
   <b>With more than 4 items:</b>
   <ul>
      <li ng-repeat="item in manyItems | limitTo:limit1"> {{item}} </li>
   </ul>
   <ul>
      <li ng-repeat="item in manyItems2 | limitTo:limit2">{{item}}</li>
</ul>
<button ng-click="setLimit2()"> Show few </button>
<button ng-click="showAll()"> Show all </button>

角 

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
    /* Config 2 */
    $scope.manyItems = ['item 31', 'item 41', 'item 51'];
    $scope.manyItems2 = ['item 12', 'item 222', 'item 32','item 42', 'item 52'];
    $scope.firstLimit = $scope.manyItems.length > 4 ? true: false;
    $scope.limit1 = 0;
    $scope.limit2 = 0;
    $scope.setLimit2 = function (  ) {
       ( $scope.firstLimit ) ? $scope.limit1 = 4 : $scope.limit1 = $scope.manyItems.length, $scope.limit2 = 4 - $scope.manyItems.length ;
    };
    $scope.setLimit2();
    $scope.showAll = function() {
       ( $scope.firstLimit ) ? $scope.limit1 = $scope.manyItems.length :  $scope.limit2 = $scope.manyItems2.length; 
    }
});

jsFiddle演示

相关文章：