CODEWITHSUNDEEP
angularjs
user3142695
user3142695

Reputation: 17332

Toggle view with ng-click and ng-if

How do I toggle the view of an article by clicking a <button>?

<button ng-click="/* change view and button label */">Label</button>
<article ng-if="/* */">
    <h1>{{title}}</h1>
    <p>{{content}}</p>
</article>
<article ng-if="/* */">
    <input type="text" value="{{title}}">
    <textarea>{{content}}</content>
</article>

Upvotes: 1

Views: 3106

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

You need to maintain one scope variable showInputsArticleWithInput & do toggle it on click of button using ng-click directive.

As you want to change your button text for that you could use ng-bind directive with expression like ng-bind="showInputsArticleWithInput? 'Edit': 'Close'"

Markup

<button type="text" ng-click="showInputsArticleWithInput = !showInputsArticleWithInput"
ng-bind="showInputsArticleWithInput? 'Edit': 'Close'"></button>
<article ng-if="!showInputsArticleWithInput">
    <h1>{{title}}</h1>
    <p>{{content}}</p>
</article>
<article ng-if="showInputsArticleWithInput">
    <input type="text" value="{{title}}">
    <textarea>{{content}}</content>
</article>

Upvotes: 2

Related Questions