使用 AngularJS 在点击时更改 Z-Index答案

【问题标题】：Change Z-Index On Click Using AngularJS使用 AngularJS 在点击时更改 Z-Index
【发布时间】：2016-08-26 15:39:32
【问题描述】：

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

我想要实现的是使用 angular 根据单击的菜单项更改图标的 z-index。例如，我尝试了几种使用 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>

图标视图：

<ul>
    <li>Home Icon</li>
    <li>Drinks Icon</li>
    <li>Food Icon</li>
    <li>Contacts Icon</li>
</ul>

CSS

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

【问题讨论】：

你试过使用 ng-class 吗？您可以使用您希望分配的 z-index 创建一个类，然后使用 ui-router 应用该类。例如： .super-zindex {z-index: 999} 为类，然后 ng-class="{super-zindex: $state.includes('home')}";如果这对您有用，请告诉我，我会将其作为答案，以便其他人可以看到。
感谢您的回复。问题是我不能使用包含，因为页面加载时已经显示了图标。我将更详细地解释：一旦页面加载，用户会看到四个图标，点击其中任何一个，所有四个图标都会动画到左上角，其中一个点击更高的索引。在图标后面，用户看到的是与图标相关的。而加载的视图我有另一个菜单让用户浏览其他页面。
如果您无法使用某个类，您可以创建一个自定义指令来处理点击事件，并在该事件处理程序中以编程方式设置 z-index。
是的，看来这是目前唯一的解决方案。我只是认为有更优雅的东西:) 无论如何感谢您的回答！

标签： html css angularjs

【解决方案1】：

这就是我在点击时实现 Z-Index 更改的方式：

HTML

<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>

CSS

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

控制器

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

【讨论】：