AngularJSを使用してクリックするとZ-インデックスが変更されます

Question

4つのアイテムと各メニューアイテムに関連するアイコンがあるナビゲーションバーがあります。アイコンは絶対的に1つ後ろに配置され、異なるテンプレートのビューに同じコントローラの範囲内にロードされます。

私が達成しようとしているのは、角度を使ってクリックしたメニュー項目に基づいてアイコンの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> 

アイコン表示：

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

Answer 1

だから、これは私がZ-インデックスの変更を実装する方法であるオンクリックしてください：

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

CONTROLLER

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