0

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?

1
  • can you add a working fiddle Jun 21, 2016 at 16:41

1 Answer 1

0

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 :).

5
  • That is not very helpful in my case, since your solution doesnt comply to the structure of the table and I am not using buttons.
    – Tess
    Jun 21, 2016 at 18:30
  • oh, but what is the logic for hide one element and show the other? Jun 21, 2016 at 18:37
  • Yeah that is my question and the reason why I asked
    – Tess
    Jun 21, 2016 at 18:44
  • It is is a bit more complex when dealing with rows in a ng-repeat table than handling divs, I think. Sorry
    – Tess
    Jun 21, 2016 at 18:49
  • 1
    Ok, i proposed a solution for you, i edited my post, please check it out and let me know if it was useful. Jun 21, 2016 at 18:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.