CODEWITHSUNDEEP
javascriptangularjstoggle
FlyingCat
FlyingCat

Reputation: 14260

How to create a toggle effect in my case?

I am trying to create a toggle in my angular app.

I have something like this

<div ng-repeat='item in items'>
    <div ng-click='toggle-{{item.number}} =!toggle-{{item.number}}>
        <span>
            <span>open</span>  // I want to show 'open' text only when the page first loaded
            <span>close</span> // I want to show 'open' text only when user clicks the div
        </span>
    </div>
</div>

I want to toggle open and close span based on the user action. What is the best way to do this? thanks!

Upvotes: 1

Views: 40

Answers (1)

Mark Pieszak - Trilon.io
Mark Pieszak - Trilon.io

Reputation: 66981

You were close! You actually don't even need to involve the item.number within your toggle event. You basically want to flip the showHide value and alternate them within your 2 options with the ! operator.

    <div ng-click="showHide = !showHide">
        <span>
            <span ng-show="!showHide">open</span> 
            <span ng-show="showHide">close</span>
        </span>
    </div>

jsFiddle example

Upvotes: 1

Related Questions