AngularJS show textarea on link click

Question

I have an array of links:

$scope.links = [{
   URL: ''    
}];

Then I show those links in the view using data-ng-repeat.

How can I do so that when the user click's any of the links under it will show a textbox? If clicked again the textbox will disappear?

So if the html is:

<div data-ng-repeat="link in links">
   <p>
        <a data-ng-href="{{link.URL}}">{{link.URl}}</a>
   <p>
    // when link above is clicked, insert here textbox
</div>

Ilan Frumer · Accepted Answer · 2014-11-13 19:10:22Z

1

Try the combination of ngClick and ngIf:

<div data-ng-repeat="link in links">
   <p>
      <a data-ng-href="{{link.URL}}"
         data-ng-click="link.$open = !link.$open">{{link.URl}}</a>
      <input type="text" data-ng-if="link.$open" />
   <p>
</div>

answered Nov 13, 2014 at 19:10

Ilan Frumer

32.4k8 gold badges73 silver badges84 bronze badges

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

2 Comments

David Dury Over a year ago

What is the meaning of link.$open I understand that the link is the current item iterated from links but what about .$open?

Ilan Frumer Over a year ago

@DavidDury arbitrary property name, you can call it however you want ( like a variable ). I prefix it with a $ as a convention because angular strips all prefixed $ when sending data with $http

Jossef Harush Kadouri · Accepted Answer · 2014-11-13 19:08:14Z

0

you can utilize the fact that ng-repeat creates a scope for each item. using a temporary variable showHelpText, this is how you can achieve it:

<div data-ng-repeat="link in links">
   <p>
        <a data-ng-href="{{link.URL}}" data-ng-click="showHelpText=!showHelpText">{{link.URl}}</a>
   <p>
    // when link above is clicked, insert here textbox
   <input type="text" data-ng-show="showHelpText">
</div>

answered Nov 13, 2014 at 19:08

Jossef Harush Kadouri

34.6k10 gold badges143 silver badges133 bronze badges

Collectives™ on Stack Overflow

AngularJS show textarea on link click

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related