Angularjs：从使用 ng-repeat 创建的表中一次仅扩展一个表行

Posted 2023-02-24

【中文标题】Angularjs：从使用 ng-repeat 创建的表中一次仅扩展一个表行

【英文标题】：Angularjs: Expand only one table row at time from the table created using ng-repeat

【发布时间】：2018-02-06 13:02:42

【问题描述】：

我正在使用具有可扩展行的 ng-repeat 创建一个表。我应该能够一次扩展一个表格行。如果我展开一行，那么之前展开的行应该关闭。 如果需要任何进一步的细节，请告诉我。谢谢。

Plunker

<tbody>
  <tr ng-repeat-start="person in people">
    <td>
      <button ng-if="person.expanded" ng-click="person.expanded = false">-</button>
      <button ng-if="!person.expanded" ng-click="person.expanded = true">+</button>
    </td>
    <td>person.name</td>
    <td>person.gender</td>
  </tr>
  <tr ng-if="person.expanded" ng-repeat-end="">
    <td colspan="3">person.details</td>
  </tr>
</tbody>

【问题讨论】：

请在此处提供我的示例代码plnkr.co/edit/yYq1dt?p=preview

请编辑您的问题并在此处添加您的 plnkr。

【参考方案1】：

您可以编写一个函数来实现这一点。该函数将当前行作为参数，隐藏所有其他行，只启用当前行。

HTML：

 <button ng-if="!person.expanded" ng-click="expandSelected(person)">+</button>

JS

  $scope.expandSelected=function(person)
    $scope.people.forEach(function(val)
      val.expanded=false;
    )
    person.expanded=true;

  

打工者：http://plnkr.co/edit/jpMCxzAwdbZYUlRylJPN?p=preview

【讨论】：

为此目的使用.forEach？ .map 用于将一个数组转换为另一个数组。

我已经更新了答案。 map 将返回一个具有相同值的数组。那么什么时候应该使用 .map？

假设在一个接受用户 ID 数组的删除 API 中，您可以使用 .map 将用户数组 [id: 1, name: 'a', ...] 转换为 [1]

【参考方案2】：

根据您的要求，无需遍历整个数组来检查是否打开并关闭了任何其他行。 只需将行号存储为详细信息，然后像这样在您的 tr 中使用它

<tr ng-repeat-start="person in people track by $index">
            <td>
              <button ng-if="rowNumber == $index" ng-click="detailView(-1)">-</button>
              <button ng-if="rowNumber != $index" ng-click="detailView($index)">+</button>
            </td>
            <td>person.name</td>
            <td>person.gender</td>
          </tr>
          <tr ng-if="rowNumber == $index" ng-repeat-end="">
            <td colspan="3">person.details</td>
          </tr>

还有一个功能可以帮助解决这个问题

$scope.detailView = function(index)
    $scope.rowNumber = index
  

【讨论】：

也可以使用对象本身作为指标<button ng-if="selected == person" ng-click="selected = person">+</button>