我制作了一个标签式界面(在顶部导航菜单中使用药片),我想让标签在点击后保持高亮显示。但是,现在只有在用户点击两次时才会发生这种情况。我目前的代码如下:
<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>
所以我的两个问题是: 1.我做错了什么? 2.我正在做的最好/可接受的做法是什么?我以为我可以使用$ state.current.name作为selectedTab值,但这不起作用。
仅供参考我正在重复一些列表项,因为我发现如果我只是有条件地看到以管理为中心的药片,菜单项将会换行,我最终会有多个菜单行。就像我说的 - 如果有更好的方法来做同样的事情......