AngularJS：如何在ng-repeat内实现点击触发的手风琴效果并解决内容重复加载问题

嘿，这个问题我之前也碰到过！核心问题就是你可能用了一个共享的作用域变量来存储加载的子内容，导致所有ng-repeat循环里的条目都绑定到同一个变量上，所以一点击所有分类的对应位置都变成了相同内容。要实现每个分类仅加载对应子内容的手风琴效果，关键是给每个循环项单独维护自己的状态～

具体实现步骤 #

1. 给每个分类项添加独立状态属性 #

首先在控制器里，给你的分类数组（假设是$scope.opps）中的每一个opp对象，添加专属的状态属性，用来控制展开/收起和存储子内容：

// 假设你的分类数据已赋值给$scope.opps
angular.forEach($scope.opps, function(opp) {
  opp.isExpanded = false; // 默认处于收起状态
  opp.selectedSubContent = ''; // 存储当前分类加载的子内容
});

2. 修改点击事件，操作当前条目的状态 #

把原来的click_subcat函数改成接收当前的opp对象，这样就能针对性地修改这个条目自己的状态，而不是影响全局：

$scope.click_subcat = function(opp, ctNm) {
  // 切换手风琴的展开/收起状态
  opp.isExpanded = !opp.isExpanded;
  
  // 这里替换成你实际加载子内容的逻辑，比如接口请求
  // 示例：模拟加载子内容
  opp.selectedSubContent = `分类${ctNm}对应的子内容`;
  
  // 如果是异步请求，比如用$http：
  // $http.get(`/api/subcategories/${ctNm}`)
  //   .then(function(response) {
  //     opp.selectedSubContent = response.data;
  //   });
};

3. 更新HTML模板，绑定当前条目的状态 #

修改模板，让点击事件传递当前opp，并根据opp.isExpanded来控制子内容的显示，同时子内容绑定到opp自己的selectedSubContent：

<!-- 你的ng-repeat循环容器 -->
<div ng-repeat="opp in opps">
  <!-- 父分类点击触发元素 -->
  <span ng-click="click_subcat(opp, opp.ct_nm);">
    {{opp.ct_nm}} {{opp.isExpanded ? '▼' : '▶'}}
  </span>
  
  <!-- 手风琴展开的子内容区域，仅当isExpanded为true时显示 -->
  <div ng-if="opp.isExpanded">
    <!-- 子内容显示位置，绑定当前opp的selectedSubContent -->
    <span style="color:white;cursor:pointer" ng-click="click_pdms(opp, opp.sbct_nm);">
      {{opp.selectedSubContent || opp.sbct_nm}}
    </span>
    <!-- 可以在这里添加更多子分类相关内容 -->
  </div>
</div>

4. 可选：实现互斥手风琴（一次只展开一个） #

如果你希望每次只能展开一个分类，就在点击事件里先把所有分类的isExpanded设为false，再打开当前分类：

$scope.click_subcat = function(opp, ctNm) {
  // 先收起所有分类
  angular.forEach($scope.opps, function(item) {
    item.isExpanded = false;
  });
  // 展开当前分类
  opp.isExpanded = true;
  
  // 加载子内容逻辑同上
  opp.selectedSubContent = `分类${ctNm}对应的子内容`;
};

为什么原来的方案会出问题？ #

之前的实现应该是用了一个全局的作用域变量（比如$scope.selectedSubcat）来存储加载的内容，所有ng-repeat里的<span>都绑定到这个变量上，所以任何一个分类的点击都会更新这个全局变量，导致所有位置都显示相同内容。现在每个opp对象自己维护状态，就只会更新当前条目的内容啦～

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