在一个表格行中显示隐藏列

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> 

在这样，根据具体情况，您将拥有一个包含两个选项（删除和恢复）的操作列，并且这对每个项目都是独立的（这很酷，您不觉得吗？）。显示的第一个元素将是删除选项，如果您单击该选项，它将显示还原选项，另外您不需要自己处理该变量。我希望这对你有用:)。