Question

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

要求：

如果第一个ul只有1个项目，那么第二个ul 3项目中的项目应该显示，然后点击显示第二个ul应该显示的更多剩余项目。
如果第一个ul有超过4个项目，那么点击显示更多剩余项目，包括第二个ul应显示。
想要一种通用方式，以便在添加时支持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;
    };
});

Fiddle Demo

Answer 1

您可以尝试以下代码：

<强> HTML

<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 Demo

如何以角度显示/隐藏多个项目列表

1 个答案: