How to show Active tab using ng-class

[Anil Mathew]

I have a code like this - http://plnkr.co/edit/Z2HrNB9yKq3sdKvhEth0?p=catalogue

I am trying to show the selected tab as active, while the others being non-active. Any idea how I can do this using angular js?

Thanks.

[Eric Eslinger]

I use ui-router rather than ng-route, and just do this:

<li ng-class="{'active': $state.includes('app.start')}"><a ui-sref="app.start">START</a></li>

The latest release of ui-router has better semantics for ui-sref-active, so you can just do <li ui-sref-active="active"> as well.

http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-sref-active

(it used to only include that state and not child states, which was why I did it in the above way).

e

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.