分享人:高昕
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
任务6-10我们需要实现一个侧边栏高亮,下面我们看一种实现方法。
ng-repeat
用ng-repeat写出一级和二级菜单。
ng-class
<ion-list>
<ion-item ng-repeat="project in projects"
ng-click="selectProject(project, $index)"
ng-class="{active: activeProject == project}">
{{project.title}}
</ion-item>
</ion-list>
根据projects循环创建ion-item,当activeProject为当前循环到的project时,增加active样式。
打开状态:
<button ng-click="vm.toggleList($index)" ></button>
<ul ng-show="vm.first== $index"> <ul>
vm.first=$window.sessionStorage.getItem('first');
vm.toggleList= function (x) {
vm.first= (vm.first == x)? undefined:x;
};
点击提取序号,让对应序号的ul列表显示出来,如果点击同一个,使其变成undefined,隐藏UL
一级菜单高亮:
<button ng-click="vm.toggleList($index)"
ng-class="{current:vm.first ==$index}" ></button>
序号会存到session里面,然后给相应序号的一级菜单加 current类名
二级菜单高亮:
<li class="second text-center" ng-repeat="y in x.second"
ng-class="{active: vm.second === y.title}" >
<a ng-click="vm.currentList(y.title ,$parent.$index)">{{y.title}} </a>
</li>
vm.currentList = function (y,index) {
vm.second=y;
$window.sessionStorage.setItem('first',index);
$window.sessionStorage.setItem('second',y)
};
点击二级菜单,传title和父级$index的值,存到session里面,给同title的二级菜单加active类名
感谢大家观看
制作人:高昕