Question

我有一个项目列表，如：

    <ul>
      <li ng-repeat="show in data_shows">
        <span class="program_shows_show_day">{{show[2]*1000 | amDateFormat:'ddd D MMM'}}</span>
        <span class="program_shows_show_time">{{show[2]*1000 | amDateFormat:'H:mm'}} - {{show[3]*1000 | amDateFormat:'H:mm'}}</span>
      </li>
    </ul>

如果有超过4件商品，我只想显示前4件商品，并用按钮隐藏其余商品（＆＃39;全部显示＆＃39;）。

使用jQuery我只计算项目，如果超过4项，则将一个类应用于<ul>。在Angular中它有点难度 - 我知道ng-repeat会生成一个$ index变量，但我只能在<li>个项目中使用它吗？那么在<ul>元素上应用类的最佳方法是什么？

Answer 1

ngClass是您最好的选择：

<ul ng-class="{'my-hiding-class': data_shows.length > 4}">
 ...

这只是说当你的集合大小大于4时，将类'my-hiding-class'添加到ul。文档here

修改

对于按钮，您需要执行以下操作：

<button ng-click="toggleList()"></button>

然后在你的指令中：

scope.toggleList = function() { scope.showList = !scope.showList; };

然后稍微更改您的ngClass声明：

<ul ng-class="{'my-hiding-class': data_shows.length > 4 && showList}">

编辑2：

使用limitTo过滤器看起来不错，但如果你决定使用过滤器路径，你可能想用自定义功能包装它：

angular.module('myApp').filter('limitlessFilter', function($filter){ return function(objects, limit, showAll) { if(showAll){ return objects; } else { return $filter('limitTo')(objects, limit); } } });

在您的HTML中：

<li ng-repeat="show in data_shows | limitlessFilter:4:showAll"> ... <button ng-bind="showAll && 'Show Less' || 'Show More'" ng-click="toggleShowAll()"></button>

在你的控制器/指令
中
scope.toggleShowAll = function() { scope.showAll = !scope.showAll; };

另一方面，如果您想限制李的渲染次数，请务必在ng-repeat上使用track by。文档here

Answer 2

您可以使用Angular的 limitTo 过滤器将最初显示的项目数限制为4。

另外，您可以有2个按钮（一个用于显示所有项目，一个用于将显示的项目限制为4个），并根据当前显示的项目和项目总数显示/隐藏它们（或禁用/启用它们）

E.g：

// VIEW
<ul>
    <li ng-repeat="item in items | limitTo:limit">{{item}}</li>
</ul>

<button ng-click="setLimit(4)" ng-disabled="(limit===4)||(items.length<=4)">
    Show few
</button>
<button ng-click="setLimit(0)" ng-disabled="items.length<=limit">
    Show all
</button>

// CONTROLLER
$scope.items = [...];
$scope.limit = 4;
$scope.setLimit = function (lim) {
    $scope.limit = (lim <= 0) ? $scope.items.length : lim;
};

另请参阅此 short demo 。

Answer 3

仅向控制器中的data_shows集合添加4个项目。这样你就可以测试逻辑，测试视图会更棘手。

Answer 4

这应该可以解决问题

<ul>
  <li ng-repeat="show in data_shows | limitTo:4">
    <span class="program_shows_show_day">{{show[2]*1000 | amDateFormat:'ddd D MMM'}}</span>
    <span class="program_shows_show_time">{{show[2]*1000 | amDateFormat:'H:mm'}} - {{show[3]*1000 | amDateFormat:'H:mm'}}</span>
  </li>
</ul>
<button ng-hide="data_shows.length < 4">Show more</button>

您可以使用示波器中的变量替换第一个“4”，并在单击按钮时修改此值。

但是，BenCr的回答在某些方面听起来更好。

如何使用基于项目数的按钮显示/隐藏项目列表（Angular）

4 个答案: