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

我有一个项目列表，如：

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

{{show[2]*1000 | amDateFormat:'ddd MMM'}
{{show[2]*1000 | amDateFormat:'H:mm'}-{{{show[3]*1000 | amDateFormat:'H:mm'}}

当有超过4个项目时，我只想显示前4个项目，并用按钮（“全部显示”）隐藏其余项目

---

使用jQuery，我只需计算项目，如果超过4个项目，则对

应用一个类。在Angular中，这有点困难-我知道ng repeat生成$index变量，但我只能在

项中使用它，对吗？那么，在

元素上应用类的最佳方式是什么呢？

仅向控制器中的数据集合添加4项。通过这种方式，您可以测试逻辑，测试视图将更加复杂。

仅向控制器中的数据集合添加4项。通过这种方式，您可以测试逻辑，测试视图将更加棘手。

ngClass

是您最好的选择：

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

然后稍微更改您的

ngClass

声明：

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

在HTML中：

<li ng-repeat="show in data_shows | limitlessFilter:4:showAll">
  ...

<button ng-bind="showAll && 'Show Less' || 'Show More'" ng-click="toggleShowAll()"></button>

---

另一方面，如果要限制li经过的渲染次数，请确保在ng repeat上使用

track by

。文档是您的最佳选择：

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

然后稍微更改您的

ngClass

声明：

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

在HTML中：

<li ng-repeat="show in data_shows | limitlessFilter:4:showAll">
  ...

<button ng-bind="showAll && 'Show Less' || 'Show More'" ng-click="toggleShowAll()"></button>

---

另一方面，如果要限制li经过的渲染次数，请确保在ng repeat上使用

track by

。文档

这应该可以做到

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

{{show[2]*1000 | amDateFormat:'ddd MMM'}
{{show[2]*1000 | amDateFormat:'H:mm'}-{{{show[3]*1000 | amDateFormat:'H:mm'}}


显示更多

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

---

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

这应该可以解决问题

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

{{show[2]*1000 | amDateFormat:'ddd MMM'}
{{show[2]*1000 | amDateFormat:'H:mm'}-{{{show[3]*1000 | amDateFormat:'H:mm'}}


显示更多

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

---

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

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

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

例如：

//查看

{{item}

很少露面
全部展示
//控制器
$scope.items=[…]；
$scope.limit=4；
$scope.setLimit=函数（lim）{
$scope.limit=（lim您可以使用Angular的过滤器最初将显示的项目数限制为4

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

例如：

//查看

{{item}

很少露面
全部展示
//控制器
$scope.items=[…]；
$scope.limit=4；
$scope.setLimit=函数（lim）{
$scope.limit=（lim这非常有效，谢谢！我知道还必须添加切换类的按钮（我的隐藏类）打开或关闭。我有以下代码：
。有没有办法让
元素听ng click命令？@Mike:它到底是如何只显示前4项的？我缺少什么吗？@ExpertSystem，我假设他在类上设置了一些CSS属性，他想分配给
以限制高度。在然而，在回答你的问题时，@ Squrler可能想考虑一个事实：渲染所有的
元素并隐藏它们可能是低效的（取决于列表的大小）。。另一方面，你的实现对我来说似乎有点混乱，所以我会选择创建一个自定义过滤器来包装
limito
。@迈克：你是对的，使用CSS来渲染所有元素只是为了隐藏其中的一些元素是低效的。自定义过滤器在这里没有帮助。正确的方法是为“limitItems”ul，添加按钮并处理所有限制逻辑。我只是想让它更直接，让OP更容易理解。你觉得“凌乱”是什么“但是关于我的实现？@ExpertSystem，您的逻辑依赖于将限制变量更改为项目数组的长度，这可能是一个不断变化的值，这一事实很混乱。我刚才提供的解决方案与数组中的数据量无关，并明确表示“显示所有项目，或显示我指定的项目数。两者之间没有任何区别”这很好，谢谢！我知道还必须添加切换类（我的隐藏类）的按钮打开或关闭。我有以下代码：
。有没有办法让
元素听ng click命令？@Mike:它到底是如何只显示前4项的？我缺少什么吗？@ExpertSystem，我假设他在类上设置了一些CSS属性，他想分配给
以限制高度。在但是，Squrler可能想考虑一个事实：渲染所有的
元素并隐藏它们可能是低效的（取决于列表的大小）。在另一方面，你的实现似乎有点混乱，所以我会选择创建一个自定义FI。
// 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;
};