2014-03-26 23 views
0

我有一個表格,其中我有一個我想摺疊的展開元素,當我點擊表格的第一行時展開。我正在使用anuglar功能collapse將唯一標識符傳遞給AngularJS崩潰?

到目前爲止,這工作正常,但如果我有三個相同的表,單擊一個頂部行摺疊所有三​​個。

我可以以某種方式將一些唯一標識符傳遞給collpase函數嗎?

HTML

<div ng-repeat="detail in details.detail"> 
    <div class="my_table"> 
     <table> 
      <tbody> 
       <tr class="top_row" ng-click="isCollapsed = !isCollapsed"> 
        <td colspan="2">        
         <span class="f_name"> 
          {{ details.f_name }} 
         </span> 
         <span class="l_name" > 
          {{ details.l_name }} 
         </span> 
        </td> 
       </tr> 
       <tr> 
        <td class="detail"> 
         <span class="_address" collapse="isCollapsed"> 
          {{ details.address }} 
         </span> 
        </td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div> 

JS

function CollapseCtrl($scope) { 
    $scope.isCollapsed = false; 
} 

回答

1

您可以使用ng-repeat特變$index,還可以使用陣列模式

<div ng-repeat="detail in details.detail"> 
    <div class="my_table"> 
     <table> 
      <tbody> 
       <tr class="top_row" ng-click="isCollapsed[$index] = !isCollapsed[$index]"> 
        <td colspan="2">        
         <span class="f_name"> 
          {{ details.f_name }} 
         </span> 
         <span class="l_name" > 
          {{ details.l_name }} 
         </span> 
        </td> 
       </tr> 
       <tr> 
        <td class="detail"> 
         <span class="_address" collapse="isCollapsed[$index]"> 
          {{ details.address }} 
         </span> 
        </td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div> 


function CollapseCtrl($scope) { 
    $scope.isCollapsed = []; 
}