CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
David Dury
David Dury

Reputation: 5717

AngularJS show textarea on link click

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>

Upvotes: 0

Views: 1085

Answers (2)

Ilan Frumer
Ilan Frumer

Reputation: 32357

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>

Upvotes: 1

Jossef Harush Kadouri
Jossef Harush Kadouri

Reputation: 34207

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>

Upvotes: 0

Related Questions