У меня есть статический веб-сайт, который мне нужно разработать с помощью AngularJS.
Как разработать вертикальное SideMenu с функцией переключения, при этом у SideMenu есть menuItems-> sub-menuItems -> Sub-sub-MenuItems?
Как это:
Ниже мой HTML-код?
Как мне преобразовать это в директиву боковой панели в angularjs, чтобы я мог использовать ее повторно?
<li class="active ">
<a href="javascript:;">
<i class="fa fa-medkit"></i>
<span class="title">Health and Safety</span>
<span class="arrow "></span>
</a>
<ul class="sub-menu">
<li class=" ">
<a href="javascript:;">
<i class="fa fa-dashboard"></i>
H & S Dashboard
<span class="arrow "></span>
</a>
</li>
<li class="active">
<a href="javascript:;">
<i class="fa fa-check"></i>
HIRA<span class="arrow "></span>
</a>
<ul class="sub-menu">
<li class="">
<a href="#/hira-list" >
<i class="fa fa-list"></i>
HIRA List
</a>
</li>
<li class="active">
<a href="#/hira-intimation">
<i class="fa fa-pencil"></i>
HIRA Creation
</a>
</li>
</ul>
</li>
<li class="">
<a href="javascript:;" >
<i class="fa fa-list"></i>
Accident
<span class="arrow "></span>
</a>
<ul class="sub-menu">
<li class="">
<a href="#/accident-list" >
<i class="fa fa-list"></i>
Accident List
</a>
</li>
<li class="">
<a href="#/accident-intimation">
<i class="fa fa-ambulance"></i>
Intimation
</a>
</li>
<li class="">
<a href="#/accident-detailed-report">
<i class="fa fa-user-md"></i>
Detailed Report</a>
</li>
<li class="">
<a href="#/accident-rcp">
<i class="fa fa-check"></i>
RCA & CAPA
</a>
</li>
</ul>
</li>
<li class="active">
<a href="javascript:;">
<i class="fa fa-ambulance"></i>
Unsafe Action
<span class="arrow "></span>
</a>
<ul class="sub-menu">
<li class="">
<a href="#/unsafe-action-list">
<i class="fa fa-list"></i>
Unsafe Action List
</a>
</li>
<li class="active">
<a href="#/unsafe-action-intimation">
<i class="fa fa-ambulance"></i>
Intimation
</a>
</li>
<!-- <li class=" ">
<a href="javascript:;">
<i class="fa fa-check"></i>
RCA & CAPA
</a>
</li> -->
</ul>
</li>
<li class="active">
<a href="javascript:;">
<i class="fa fa-ambulance"></i>
Unsafe Condition
<span class="arrow"></span>
</a>
<ul class="sub-menu">
<li class="">
<a href="#/unsafe-condition-list">
<i class="fa fa-list"></i>
Unsafe Conditon List
</a>
</li>
<li class="active">
<a href="#/unsafe-condition-intimation">
<i class="fa fa-ambulance"></i>
Intimation
</a>
</li>
<!-- <li class=" ">
<a href="javascript:;">
<i class="fa fa-check"></i>
RCA & CAPA
</a>
</li> -->
</ul>
</li>
<li class="active">
<a href="javascript:;">
<i class="fa fa-check"></i>
Near Miss
<span class="arrow "></span>
</a>
<ul class="sub-menu">
<li class=" ">
<a href="#/near-miss-list" >
<i class="fa fa-list"></i>
Near Miss List
</a>
</li>
<li class="active">
<a href="#/near-miss-intimation">
<i class="fa fa-ambulance"></i>
Intimation
</a>
</li>
<li class=" ">
<a href="javascript:;">
<i class="fa fa-check"></i>
RCA & CAPA
</a>
</li>
</ul>
</li>
<li class=" ">
<a href="javascript:;">
<i class="fa fa-ambulance"></i>
Suggestion
<span class="arrow "></span>
</a>
<ul class="sub-menu">
<li class="">
<a href="javascript:;" >
<i class="fa fa-list"></i>
Suggestion List
</a>
</li>
<li class="">
<a href="javascript:;">
<i class="fa fa-ambulance"></i>
Intimation
</a>
</li>
<li class=" ">
<a href="javascript:;">
<i class="fa fa-check"></i>
Status
</a>
</li>
</ul>
</li>
<li class="">
<a href="javascript:;">
<i class="fa fa-ambulance"></i>
Monitor & Measures
<span class="arrow "></span>
</a>
</li>
</ul>
</li>
*open close functionality in sidebar*