Question

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

<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>

Answer 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;

  }

Working Plunker ：http://plnkr.co/edit/jpMCxzAwdbZYUlRylJPN?p=preview

Answer 2

根据您的要求，无需通过整个数组来检查是否有任何其他行被打开并关闭它。只需将rownumber存储为详细信息并在您的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
  }

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

2 个答案: