Tabbed Navigation in AngularJS

Question

In AngularJS, how can I create a simple tabbed navigation (switching content as tab is clicked)?

HTML:

<ul class="tabbed-navi">
    <li class="active">
        <a href="#one">Nav One</a>
    </li>
    <li>
        <a href="#two">Nav Two</a>
    </li>
    <li>
        <a href="#three">Nav Three</a>
    </li>
</ul>

<div class="active">
    Content One
</div>
<div>
    Content Two
</div>
<div>
    Content Three
</div>

I am looking for a simple, beginner-friendly example, not "download these other things and then..."

Great! Now how can I a.) show the first content by default (this works `
` or is there a better solution?) and b.) highlight the currently selected nav-element? — Ben, Mar 17 '13 at 11:30
Have a look at the tabs directive from http://angular-ui.github.com/bootstrap/ — pkozlowski.opensource, Mar 17 '13 at 11:58
"I am looking for a simple, beginner-friendly example, not 'download these other things and then...'" ;) — Ben, Mar 17 '13 at 12:08
If ui-bootstrap is not "beginner" enough than I'm afraid you're out of luck. — Stewie, Mar 17 '13 at 16:06
To set default tab on page load you can use `ng-init="selected=1"` directive: http://docs.angularjs.org/api/ng.directive:ngInit — Dmitry Evseev, Mar 18 '13 at 09:47

score 2 · Answer 1 · edited May 23 '17 at 12:29

2

See the AngularJS home page, the "Create Components" section. That sample app defines two directives: pane and tabs.

For some additional explanation about how this works, see 'this' vs $scope in AngularJS controllers

edited May 23 '17 at 12:29

Community

1
1

answered Mar 18 '13 at 15:45

Mark Rajcok

362,217
114
495
492

score 1 · Answer 2 · answered Feb 04 '15 at 00:44

Maybe something like this...

<ul class="tabbed-navi">
    <li class="active">
        <a href ng-click="option=1">Nav One</a>
    </li>
    <li>
        <a href ng-click="option=2">Nav Two</a>
    </li>
    <li>
        <a href ng-click="option=3">Nav Three</a>
    </li>
</ul>

<div ng-class="option==1? 'active':''">
    Content One
</div>
<div ng-class="option==2? 'active':''">
    Content Two
</div>
<div ng-class="option==3? 'active':''">
    Content Three
</div>

Tabbed Navigation in AngularJS

2 Answers2