Angular change text based on variable

Question

I'm hiding or showing a div when a button is clicked.

I want to change the text in the link to say "show" / "hide".

I have it working but is there a better way to change the text rather than checking for the variable on two seprate spans.

    <a ng-click="showHint = !showHint"><span ng-if="showHint">Hide</span><span ng-if="!showHint">Show</span> tips</a>

    <div ng-if="showHint">
        <p>
            Hint text Hint text Hint text Hint text 
        </p>
    </div>

Satpal · Accepted Answer · 2016-10-05 13:39:25Z

6

You can use conditional operator with interpolation.

<a ng-click="showHint = !showHint">{{ showHint ? "Hide" : "Show"}}tips</a>

Fiddle

answered Oct 5, 2016 at 13:39

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

Comments

Aks1357 · Accepted Answer · 2016-10-05 13:38:42Z

4

Check this, hope it works for you:

<span ng-bind="showHint ? 'Hide' : 'Show'"></span>

Complete Snippet:

<a ng-click="showHint = !showHint">
    <span ng-bind="showHint ? 'Hide' : 'Show'"></span> tips
</a>

OR

<a ng-click="showHint = !showHint">
    <span ng-bind="showHint ? 'Hide tips' : 'Show tips'"></span>
</a>

answered Oct 5, 2016 at 13:38

Aks1357

1,0721 gold badge9 silver badges19 bronze badges

Collectives™ on Stack Overflow

Angular change text based on variable

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related