angularjs任务侧栏高亮

1.背景介绍

angularjs任务里面要实现一个侧栏高亮的效果，也就是选中二级菜单之后，刷新完还是保持当前的状态。杀人游戏中碰到最多的问题应该是数据传递跟保持状态这几个字了把，那时候sessionStorage用的飞起，所以这个任务里面我也是用的sessionStorage的方法

2.知识剖析

<div ng-repeat="x in sideBar">

   <div "home-sidebar-title"
        ng-click="getHomeTitle($index)">
       <span "glyphicon glyphicon-pencil icon"></span>
       <span>{{x.sideBarTitle}}</span>
       <span "glyphicon glyphicon-menu-right"></span>

   </div>

   <div "home-sidebar-content"
        ng-show="ggtitle == $parent.$index"
        ng-repeat="y in x.sideBarContent"
        ng-click="getHomeContent(y.sideBarName, $parent.$index)"
        ng-"{tcontent: ggcontent === y.sideBarName}">
       <a href="" ui-sref="{{y.url}}">
           <span>{{y.sideBarName}}</span>
       </a>

   </div>

</div>

$scope.ggtitle = sessionStorage.getItem('theTitle');
$scope.ggcontent = sessionStorage.getItem('theContent');

// 一级菜单
$scope.getHomeTitle = function (e){
   $scope.ggtitle = ($scope.ggtitle == e) ? undefined : e;
};

// 二级菜单
$scope.getHomeContent = function (z, index){
   $scope.ggcontent = z;
   sessionStorage.setItem('theTitle', index);
   sessionStorage.setItem('theContent', z);
};

做法是通过两个ng-repeat的方法将数据渲染上页面，然后通过一级菜单跟二级菜单的各自的条件来达到任务要的效果

可以看到最外层是用一个div套住所有的内容，然后用一个div repeat常量的title出来，然后在这个div里面在用一个div将content的name渲染出来。这里的title盒子里面还有一个点击事件getHomeTitle，这里的点击事件是为了二级菜单也就是content盒子的显示跟隐藏而设置的，在页面一开始进来的时候，所有的二级菜单都是隐藏的，所以我在content盒子这里设置了ng-show，同时，content盒子也有一个点击事件getHomeContent，这里的点击事件是为了本身选项在点击的时候能够高亮而设置的，也就是改变本身的css样式，这里设置了ng-class事件。

接下来就是实现点击title盒子实现content盒子的显示跟隐藏

点击title盒子能获得数据就是本身的$index还有本身的title，因为$index跟title都是唯一的，没有重复，所以其实用$index或者title来做判断条件其实都可以。这里用$index是为了方便，获得$index之后将$index作为参数传入函数里面，上面的代码里面的判断条件是这样的

$scope.ggtitle = ($scope.ggtitle == e) ? undefined : e;

var一个变量与$index做比较，用了一个三元运算符，当ggtitle == e的时候就是undefined，反之则是e也就是$index，然后再将这个结果赋值给这个变量，至此，这个变量就有了值；回头去看html文件，ng-show的判断条件是

ng-show="ggtitle == $parent.$index"

当ggtitle == 当前点击项的$index的时候，那么就是true，这个content盒子就会显示出来，反之则是false，隐藏content盒子

总结就是，点击title盒子使得content盒子的显示跟隐藏是通过title盒子的$index来作为判断条件，同样的道理，让content盒子实现点击当前项，然后当前项更改css样式，这里我是通过content盒子的name来进行判断

2 为什么title要传入$index，而content盒子要传入$parent.$index还有本身的y.sideBarName呢，title的$index是为了ng-show，前面说过了，然后content的name是为了ng-class，而在这里还要再传一遍$index，是为了刷新后的高亮效果

title的$index只是为了ng-show，不参与任何sessionStorage的设置，而content传入index跟name，除了name作为ng-class的判断条件之外，还作为sessionStorage值存了起来。之前的杀人游戏已经非常熟悉sessionStorage的使用方式，所以应该都能理解name在这里的作用，就是为了刷新后能保持当前项的高亮，而index作为sessionStorage值在这里的必要性是什么，没有这个index，那么在页面刷新之后，虽然name还是高亮的状态，但是四个content盒子都是隐藏的状态，必须点击开来才能看到高亮的name，所以设置index的sessionStorage值是为了能够展开当前项的content盒子

3.常见问题

4.解决方案
5.编码实战
6.扩展思考

7.参考文献

8.更多讨论

1 index跟parent.index有什么区别

答：index是最外层的数组的索引，而对象里面也有数组，也有本身的index，所以parent.index在这里是为了能让点击一级菜单出现二级菜单的

2 小箭头改变方向的判断条件是啥

答：就是二级菜单的ng-show的条件

3 不用index，用一级菜单的名字来进行判断可以吗

答：可以的，两者是一样的