Toggle <a> class with Angular.js

Question

I am using Angular.js to create a simple tabbed interface, but I would like to toggle a class of active on whichever link I just clicked. Here is my code

    <header>
    <nav>
    <a href ng:click="selected=1">Home</a>
    <a href ng:click="selected=2">About</a>
    <a href ng:click="selected=3">Work</a>
    <a href ng:click="selected=4">Blog</a>
    <a href ng:click="selected=5">Login</a>
    </nav>
    </header>

    <article ng:hide="selected == 2 || selected == 3 || selected == 4 || selected == 5" >
    <section>
    <h2>1</h2>
    </section>
    </article>

    <article ng:show="selected == 2">
    <section>
    <h2>2</h2>
    </section>
    </article>


    <article ng:show="selected == 3">
    <section>
    <h2>3</h2>
    </section>
    </article>


    <article ng:show="selected == 4">
    <section>
    <h2>4</h2>
    </section>
    </article>


    <article ng:show="selected == 5">
    <section>
    <h2>5</h2>
    </section>
    </article>

I also made a CodePen. Any help would be greatly appreciated!

possible duplicate of What is the best way to conditionally apply a class with angularjs? — JB Nizet
– JB Nizet, Commented Jul 16, 2013 at 18:45

Felipe Castro · Accepted Answer · 2013-07-16 20:18:13Z

3

Use the ng-class directive:

<header>
        <nav>
            <a href ng:click="selected=1" ng-class="{active: selected == 1}">Home</a>
            <a href ng:click="selected=2" ng-class="{active: selected == 2}">About</a>
            <a href ng:click="selected=3" ng-class="{active: selected == 3}">Work</a>
            <a href ng:click="selected=4" ng-class="{active: selected == 4}">Blog</a>
            <a href ng:click="selected=5" ng-class="{active: selected == 5}">Login</a>
        </nav>
</header>

answered Jul 16, 2013 at 20:18

Felipe Castro

1,61311 silver badges10 bronze badges

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

Collectives™ on Stack Overflow

Toggle <a> class with Angular.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related