Show element after ng-click angularjs

Question

I'm looking for angular-way solution for task:

Imagine, we have many rows like

<tr>
<td>
 <span>click me</span>
 <span style='display: none;'>i'll be shown</span>
</td>
</tr>
...[a lot as the same rows]...

All i want is to show second span and hide first, after click to first span.

p.s. really don't want to use jQuery for this issue.

haimlit · Accepted Answer · 2014-05-06 13:09:27Z

2

In the view:

<span ng-click="onItemClicked(currentItem)">click me</span>
<span ng-show="currentItem.isVisible">I'll be shown</span>

And in the controller:

  $scope.onItemClicked = function (item) {
    item.isVisible = true;
  };

haimlit

2,6022 gold badges24 silver badges26 bronze badges

answered May 6, 2014 at 12:49

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

but he needs to hide the first span

to hide the first element you can add ng-hide <span ng-hide="currentItem.isVisible" ng-click="onItemClicked(currentItem)">click me</span>