Javascript Angularjs：从使用ng repeat创建的表中一次只展开一个表行

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

-
+
{{person.name}
{{person.gender}
{{person.details}

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

HTML：

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

---

工作插销：

根据您的要求，无需检查整个阵列是否打开和关闭任何其他行。 只需将行号存储为detail，并在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>

---

请在此处输入示例代码请编辑您的问题并在此处添加您的plnkr。是否使用

。forEach

进行此操作

.map

用于将一个数组转换为另一个数组。我已更新了答案。映射将返回具有相同值的数组。那么什么时候应该使用.map呢？比方说，在一个接受用户id数组的删除API中，您可以使用

.map

将您的用户数组

[{id:1，name:'a'}，…]

转换为

[1]

。您还可以使用对象本身作为指示符

+

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

  }

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