AngularJS实现选中某行时隐藏其他行详情的技术咨询

我来帮你搞定这个需求！要实现点击新行展开详情时自动关闭其他行，关键是把原来分散在每个Person对象里的show状态，改成由控制器统一维护一个全局的展开状态变量，这样就能精准控制哪一行显示详情啦。

第一步：修改控制器代码 #

首先在你的控制器里添加一个变量用来跟踪当前展开的行，再写一个切换展开状态的方法：

angular.module('yourAppName', [])
.controller('yourCtrlName', function($scope) {
  // 假设这是你的人员数据（可以替换成实际数据）
  $scope.Persons = [
    {FirstName: 'John', LastName: 'Doe', Department: 'Sales', SalesDetails: 'Q1销售额：$5000'},
    {FirstName: 'Jane', LastName: 'Smith', Department: 'Marketing', SalesDetails: 'Q1销售额：$3800'},
    {FirstName: 'Bob', LastName: 'Brown', Department: 'Sales', SalesDetails: 'Q1销售额：$6200'}
  ];

  // 用于存储当前展开的Person对象
  $scope.expandedPerson = null;

  // 切换展开/收起详情的方法
  $scope.toggleSalesDetails = function(person) {
    // 如果点击的是已展开的行，就收起；否则切换到该行展开
    $scope.expandedPerson = $scope.expandedPerson === person ? null : person;
  };
});

第二步：修改HTML表格代码 #

把原来的x.show相关逻辑替换成控制器里的全局状态判断，同时把点击事件改成调用控制器的方法：

<table>
  <thead>
    <tr>
      <th>FirstName</th>
      <th>LastName</th>
      <th>Department</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody ng-repeat="x in Persons">
    <tr>
      <td>{{x.FirstName}}</td>
      <td>{{x.LastName}}</td>
      <td>{{x.Department}}</td>
      <td>
        <a href="#" data-ng-click="toggleSalesDetails(x)"> Sales Details </a>
      </td>
    </tr>
    <tr>
      <!-- 只有当前展开的行才显示详情，用colspan让单元格占满整行 -->
      <td ng-show="expandedPerson === x" colspan="4">
        {{x.SalesDetails}}
      </td>
    </tr>
  </tbody>
</table>

原理说明 #

原来的写法是给每个Person对象单独加了show属性，所以各行的展开状态是独立的。现在我们用控制器里的expandedPerson变量统一管理：

• 点击某行时，判断该行是否已经展开：如果是，就把expandedPerson设为null（收起）；如果不是，就把expandedPerson设为当前的person对象（展开该行）。
• 所有详情行的ng-show条件都判断自身是否等于expandedPerson，这样同一时间只会有一行满足条件显示出来。

可选优化：用唯一ID判断（更稳妥） #

如果你的Person对象有唯一ID（比如数据库里的主键），可以用ID来代替对象引用判断，避免对象引用可能带来的问题：

1. 控制器里改成维护expandedPersonId：

$scope.expandedPersonId = null;

$scope.toggleSalesDetails = function(person) {
  $scope.expandedPersonId = $scope.expandedPersonId === person.id ? null : person.id;
};

2. HTML里的ng-show改成：

<td ng-show="expandedPersonId === x.id" colspan="4">

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