AngularJS 1.5动态表格行详情切换异常求助

嗨，我明白你现在遇到的问题啦——点击第一行的箭头却把所有行的详情都拉出来了，这肯定不是你想要的效果😅 核心问题应该是你用了全局的展开状态变量来控制所有行的显示/隐藏，而不是给每一行单独绑定状态。下面给你具体的解决方案：

步骤1：给每行数据添加独立的展开状态 #

在你的控制器里，当获取到表格数据后，给每个数据项添加一个isExpanded属性，初始值设为false，用来标记该行是否展开：

// 假设你的表格数据存在$scope.tableData里
angular.forEach($scope.tableData, function(item) {
  item.isExpanded = false; // 初始都折叠
});

步骤2：修改HTML，绑定每行的独立状态 #

在表格的ng-repeat循环里，把箭头的点击事件和详情的显示状态，都绑定到当前行数据的isExpanded属性上：

<table>
  <tr ng-repeat="item in tableData track by $index">
    <!-- 第一列的箭头 -->
    <td>
      <span ng-click="item.isExpanded = !item.isExpanded">
        <!-- 这里可以用向下/向上箭头图标，比如字符或图标库 -->
        {{ item.isExpanded ? '▲' : '▼' }}
      </span>
    </td>
    <!-- 其他表格列 -->
    <td>{{ item.column1 }}</td>
    <td>{{ item.column2 }}</td>
    <!-- ...其他列 -->
  </tr>
  <!-- 详情行 -->
  <tr ng-repeat="item in tableData track by $index" ng-if="item.isExpanded">
    <td colspan="3"> <!-- colspan要和表格总列数一致 -->
      <div class="detail-container">
        <!-- 这里放该行的详情内容 -->
        详情内容：{{ item.detailInfo }}
      </div>
    </td>
  </tr>
</table>

如果你的详情div是独立在表格行外的结构，也可以这样写：

<div ng-repeat="item in tableData track by $index">
  <!-- 表格行 -->
  <tr>
    <td>
      <span ng-click="item.isExpanded = !item.isExpanded">{{ item.isExpanded ? '▲' : '▼' }}</span>
    </td>
    <!-- 其他列 -->
  </tr>
  <!-- 详情区域 -->
  <div ng-show="item.isExpanded" class="detail-div">
    {{ item.detailInfo }}
  </div>
</div>

进阶：动态加载详情数据 #

如果你的详情数据不是一开始就有的，需要点击时才请求接口，可以在点击事件里加判断逻辑：

<span ng-click="toggleDetail(item)">
  {{ item.isExpanded ? '▲' : '▼' }}
</span>

然后在控制器里实现方法：

$scope.toggleDetail = function(item) {
  item.isExpanded = !item.isExpanded;
  // 如果详情未加载过，就请求数据
  if (item.isExpanded && !item.detailLoaded) {
    // 这里替换成你的接口请求逻辑
    // yourApiService.getDetail(item.id).then(function(res) {
    //   item.detailInfo = res.data;
    //   item.detailLoaded = true;
    // });
  }
};

问题根源解释 #

你之前遇到的“点击一行展开所有”，是因为用了全局变量（比如$scope.isExpanded）来控制所有行的显示状态，切换时所有行都会响应这个变量。而现在给每一行的数据对象单独绑定展开状态，点击某一行只会修改当前行的isExpanded值，其他行的状态不受影响，自然就只会展开对应行的详情啦。

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