如何在AngularJS页面的无序列表中实现默认显示前3项的展开收起功能？

这问题我之前做项目时也遇到过，用AngularJS原生指令就能轻松实现，不用额外引入插件，给你个完整的解决方案：

步骤1：在控制器中添加状态变量 #

首先在你的对应控制器里，加一个控制展开/收起状态的布尔变量，默认设为false（也就是默认收起）：

// 假设你的控制器是这样的结构
app.controller('EmployeeController', function($scope) {
  // 你的员工数据（示例）
  $scope.emp = {
    contributions: [
      "负责前端组件开发",
      "参与需求评审与方案设计",
      "优化页面加载性能",
      "指导新人熟悉项目流程",
      "跟进线上问题修复"
    ]
  };
  
  // 控制展开状态，默认收起
  $scope.isContributionsExpanded = false;
});

步骤2：修改HTML模板 #

接下来把你的列表部分改成下面这样，通过limitTo过滤器控制显示数量，再加个动态显示的展开/收起按钮：

<p><i>Key Responsibilities</i></p>
<ul>
  <!-- 动态限制显示的列表项：收起时显示前3个，展开时显示全部 -->
  <li ng-repeat="contribution in emp.contributions | limitTo: isContributionsExpanded ? emp.contributions.length : 3">
    {{contribution}}
  </li>
</ul>
<!-- 只有当列表项超过3个时才显示按钮，避免多余元素 -->
<button 
  ng-if="emp.contributions.length > 3" 
  ng-click="isContributionsExpanded = !isContributionsExpanded"
>
  {{isContributionsExpanded ? '收起' : '查看更多'}}
</button>

简单说明一下逻辑： #

• limitTo过滤器：AngularJS原生提供的过滤器，这里根据isContributionsExpanded的状态动态切换显示数量——收起时取3，展开时取数组总长度（也就是全部显示）。
• ng-if指令：判断列表总长度是否大于3，只有超过3项才显示按钮，短列表就不会出现多余的按钮，体验更友好。
• ng-click指令：点击按钮时切换状态变量的布尔值，同时按钮文本也会跟着状态变化，让用户清晰知道当前操作。

这样就实现了你要的默认收起、只显示前3项，点击可以展开/收起的功能啦～

内容的提问来源于stack exchange，提问作者Rod