Angularjs：在使用ng-repeat創建的表格中只擴展一個表格行

Question

我使用具有可擴展行的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> 

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; 

    } 

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

Answer 2

根據您的要求，沒有必要去通過整個數組檢查任何其他行被打開a關閉那個。 只存儲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> 

和一個函數來這裏http://plnkr.co/edit/yYq1dt幫助這個

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