Tess Tess - 3 months ago 17
TypeScript Question

Show hidden column in one table row

I'm working with typescript and angular in this project.
I have a table with a hidden column where both 'th' and 'td's are hidden. If the user wants to delete a row I want to show that hidden column for that specific row. It is the row with 'ng-hide="$ctrl.isInvisible"' that should show in the table header and the specific 'td' in the row where the member is listed and it has the same 'ng-hide'

My code now:

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>


The constructor sets 'isInvisible = true' so that works. However my code makes every 'td' show the restore icon when a table item is set to be deleted:

Typescript:

removeMember() {
this.isInvisible = false;
}


Does anyone know how to show the hidden 'th' and the specific 'td' but still keep the rest of the 'td's hidden?

Answer

You can use ng-show, it's way better than trying to hide something, and then you can set the logic of it with something like this:

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

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

The elementEnabled variable will be handled by the ng-click attribute, so it'll show the true value first until you click the button inside the first div and that div will hide and the other one will show and so on. You can use this example for your td's and th's too.

Edit: Ok, sorry I misunderstood some stuff. So if you only need to hide the element whenever the member is deleted you can do pretty much the same, but I don't suggest to show and hide a column header, I suggest something like this:

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

In that way, you will have an action column with both options, delete and restore, depending on the case and this will be independent for each item (that's cool don't you think?). And the first element showed will be the delete option and if you click that option it'll be show the restore option plus you don't need to handle that variable by yourself. I hope this works for you :).

Comments