Html 使用AngularJS在单击时更改Z索引

我有一个带有四个项目的导航栏和一些与每个菜单项相关的图标。图标绝对一个接一个地放置，它们从不同的模板加载到视图中，但在同一控制器的范围内

我试图实现的是使用angular根据单击的菜单项更改图标的z索引。例如，我尝试了几种使用ng switch的方法，但由于缺乏经验而无法理解

你能谈谈你对如何解决这个问题的看法吗

提前谢谢

HTML

标题视图：

<nav id="top-nav">
    <ul>
        <li ui-sref="root.home";>Home</li>
        <li ui-sref="root.drinks">Drinks</li>
        <li ui-sref="root.food-and-snacks">Food And Snacks</li>
        <li ui-sref="root.contacts">Contacts</li>
    </ul>
</nav>

---

这就是我在单击时实现Z索引更改的方式：

HTML

控制器

self.selectTab = function (id) {
    self.tab = id;
}
self.activeTab = function (id) {
    return self.tab === id;
}

---

你试过使用ng类吗？您可以使用希望分配的z索引创建一个类，然后使用ui路由器应用该类。例如：.super-zindex{z-index:999}用于类，然后ng class=“{super-zindex:$state.includes（'home'）}”；如果这对你有用，让我知道，我会给你一个答案，让别人看到。谢谢你的回复。问题是我不能使用includes，因为当页面加载时图标已经显示。我将更详细地解释：一旦页面被加载，用户会看到四个图标，单击其中任何一个，所有四个图标都会动画显示在左上角，其中一个在更高的索引上单击。在图标后面，用户可以看到与图标相关的内容。加载的视图我有另一个菜单，允许用户浏览其他页面。如果无法使用类，则可以创建自定义指令来处理单击事件，并在该事件处理程序中以编程方式设置z索引。是的，这似乎是目前唯一的解决方案。我只是觉得还有更优雅的：）谢谢你的回答！

ul li{
    position: absolute;
    height: 50px;
    width: 50px;
    lefT: 0;
    top: 0;
    z-index: 0;
}

<ul class="icons">
    <li ng-class="{front:ctrl.activeTab(1)}">icon1</li>
    <li ng-class="{front:ctrl.activeTab(2)}">icon2</li>
    <li ng-class="{front:ctrl.activeTab(3)}">icon3</li>
    <li ng-class="{front:ctrl.activeTab(4)}">icon4</li>
</ul>

<ul class="nav">
    <li ng-click="ctrl.selectTab(1)">menu item1</li>
    <li ng-click="ctrl.selectTab(2)">menu item2</li>
    <li ng-click="ctrl.selectTab(3)">menu item3</li>
    <li ng-click="ctrl.selectTab(4)">menu item4</li>
</ul>

ul.icons li.front{
z-index:1;
}

self.selectTab = function (id) {
    self.tab = id;
}
self.activeTab = function (id) {
    return self.tab === id;
}