Newbie here...
I made a tabbed interface (using pills in the top nav menu) and I want to
have the tab stay highlighted once it's been clicked. However, right now
this only happens if the user clicks it twice. My current code is as
follows:
<span ng-repeat="u in users">
<span ng-if="u.username === username">
<span ng-if="u.permission === 'Admin User' || u.permission === 'Super
User'">
<ul class="nav nav-pills" style="display:inline-block; padding-top:
34px;">
<li ng-class="{active: selectedTab == 1}"><a ui-sref="repostag"
ng-click="selectedTab = 1;">Repos Auto Tags</a></li>
<li ng-class="{active: selectedTab == 2}"><a ui-sref="assetstag"
ng-click="selectedTab = 2;">Assets Manual Tags</a></li>
<li ng-class="{active: selectedTab == 3}"><a ui-sref="publish"
ng-click="selectedTab = 3;">Publish</a></li>
<li ng-class="{active: selectedTab == 4}"><a ui-sref="admin"
ng-click="selectedTab = 4;">Admin</a></li>
<li ng-class="{active: selectedTab == 5}"><a ui-sref="config"
ng-click="selectedTab = 5;">Config</a></li>
<li ng-class="{active: selectedTab == 6}"><a ui-sref="tagactivities"
ng-click="selectedTab = 6;">Tag Activities</a></li>
<li ng-class="{active: selectedTab == 7}"><a ui-sref="locallogs"
ng-click="selectedTab = 7;">Local Logs</a></li>
<li style="font-weight: bold;"><a ui-sref="login">Logout</a></li>
</ul>
</span>
<span ng-if="u.permission !== 'Admin User' && u.permission !== 'Super
User'">
<ul class="nav nav-pills" style="display:inline-block; padding-top:
34px;">
<li ng-class="{active: selectedTab == 1}"><a ui-sref="repostag"
ng-click="selectedTab = 1;">Repos Auto Tags</a></li>
<li ng-class="{active: selectedTab == 2}"><a ui-sref="assetstag"
ng-click="selectedTab = 2;">Assets Manual Tags</a></li>
<li ng-class="{active: selectedTab == 3}"><a ui-sref="publish"
ng-click="selectedTab = 3;">Publish</a></li>
<li style="font-weight: bold;"><a ui-sref="login">Logout</a></li>
</ul>
</span>
</span>
</span>
So my two questions are:
1. What am I doing wrong?
2. Is what I'm doing even best/acceptable practice? I thought I could use
$state.current.name as selectedTab value but that didn't work.
FYI I'm repeating some of the <li> items because I discovered if I only
made the admin-centric pills conditionally visible, the menu items will
wrap and I'll end up with more than one menu line. Like I said - if there's
a better way to do the same thing...
Appreciate any useful advice...
- Joe T.
--
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 [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
