在一個表格行中顯示隱藏列

Question

我在這個項目中使用typescript和angular。 我有一個隱藏的列，'th'和'td都隱藏着。如果用戶想要刪除一行，我想顯示該特定行的隱藏列。它是'ng-hide ='$ ctrl.isInvisible''的行，它應該在表頭中顯示，並且在成員列出的行中具體的'td'，並且它具有相同的'ng-hide'

我現在代碼：

HTML

<table> 
     <thead> 
     <tr 
      <th>Name</th> 
      <th>Class</th> 
      <th>Amount</th> 
      <th>Delete</th> 
      <th ng-hide="$ctrl.isInvisible">Restore</th> <!--this is the hidden th--> 
     </tr> 
     </thead> 
     <tbody> 
     <tr ng-repeat="member in $ctrl.members| orderBy: '-id'"> 
      <td>{{member.name}}</td> 
      <td>{{member.class}}</td> 
      <td>{{member.amount}}</td> 
      <td> 
      <a href="#" ng-click="$ctrl.removeMember(member)"> 
       <i class="material-icons listicon">delete</i> 
      </a> 
      </td>   
      <td ng-hide="$ctrl.isInvisible"> 
      <a href="#" ng-click="$ctrl.restoreMember(member)"> 
       <i class="material-icons listicon">restore</i> 
      </a> 
      </td> <!--This is the hidden td --> 
     </tr> 
     </tbody> 
    </table> 

構造函數設置 'isInvisible =真正的'，這樣的作品。但是我的代碼，使每一個「TD」顯示恢復圖標，當一個表項設置爲被刪除：

打字稿：

removeMember() { 
    this.isInvisible = false; 
    } 

有誰知道如何顯示隱藏的「日」和具體「 td'但仍然保留'td的其餘部分隱藏？

Answer 1

您可以使用ng-show，它的方式不是欲蓋彌彰越好，然後你可以設置它的邏輯的東西是這樣的：

<div ng-show="elementEnabled"> 
    <button ng-click="editorEnabled=!editorEnabled"></button> 
</div> 

<div ng-show="!elementEnabled"> 
    <button ng-click="editorEnabled=!editorEnabled"></button> 
</div> 

的elementEnabled變量將由ng-click屬性進行處理，所以它會先顯示真實值，直到你點擊第一個div內的按鈕，div將隱藏，另一個會顯示，等等。你可以將這個例子用於你的td和th。

編輯：好吧，對不起，我誤解了一些東西。所以，如果你只需要隱藏每當成員將被刪除，你可以做很多相同的元素，但我不建議顯示和隱藏列標題，我建議是這樣的：

<table> 
     <thead> 
     <tr 
      <th>Name</th> 
      <th>Class</th> 
      <th>Amount</th> 
      <th>Action or Option</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr ng-repeat="member in $ctrl.members| orderBy: '-id'"> 
      <td>{{member.name}}</td> 
      <td>{{member.class}}</td> 
      <td>{{member.amount}}</td> 
      <td> 
      <a href="#" ng-show="showElement" ng-click="showElement=!showElement"> 
       <i class="material-icons listicon">delete</i> 
      </a> 
      <a href="#" ng-show="!showElement" ng-click="showElement=!showElement"> 
       <i class="material-icons listicon">restore</i> 
      </a> 
      </td>   
     </tr> 
     </tbody> 
    </table> 

在這樣，根據具體情況，您將擁有一個包含兩個選項（刪除和恢復）的操作列，並且這對每個項目都是獨立的（這很酷，您不覺得嗎？）。顯示的第一個元素將是刪除選項，如果您單擊該選項，它將顯示還原選項，另外您不需要自己處理該變量。我希望這對你有用:)。