AngularJS - 用Angular JS写个NavBar

HTML;

<ul class="stats-sidebar-nav">
<li class="item" ng-class="{'selected-1':statsView=='overview', 'item-hover': hover}" ng-mouseenter="hover1 = true" ng-mouseleave="hover1 = false"><a href="#/overview">课程总览</a></li>
<li class="item" ng-class="{'selected':statsView=='satisfaction', 'item-hover': hover2}" ng-mouseenter="hover2 = true" ng-mouseleave="hover2 = false"><a href="#/satisfaction">课程满意度</a></li>
<li class="item" ng-class="{'selected':statsView=='proactivity', 'item-hover': hover3}" ng-mouseenter="hover3 = true" ng-mouseleave="hover3 = false"><a href="#/proactivity">课程活跃度</a></li>
<li class="item" ng-class="{'selected':statsView=='understanding', 'item-hover': hover4}" ng-mouseenter="hover4 = true" ng-mouseleave="hover4 = false"><a class="" href="#/understanding">授课消化度</a></li>
</ul>

less:
@light-blue-bg: #1387C0;

a:hover{
text-decoration: none;
}

.hide {
display: hidden;
}
.border-fix {
border-top: 1px solid @light-blue-bg; // pixel perfect
}

.stats-sidebar-nav {
float: left;
width: 200px;
height: 700px; // actuall 500px
background-color: #324056;
.item {
&.selected{
background-color: @light-blue-bg;
font-weight: bold;
}

&.selected-1{
background-color: @light-blue-bg;
font-weight: bold;
.border-fix;
}
cursor: pointer;
width: 200px;
height: 40px;
border-top: 1px solid #3D4A5D;
padding-left: 18px;
a {
line-height: 40px;
height: 100%;
width: 100%;
display: block;
text-decoration: none;
color: white;
}
}
.item-hover {
background-color: @light-blue-bg;
// .border-fix;
}
}

javascript: 无

解释：
在html中，ng-mouseenter 与 ng-mouseleave 给每个块定义了一个hover[i]变量，这个变量控制了ng-class中得item-hover。

css中，.stats-sidebar-nav .item a 定义了a的：
1. line-height 使得文字居中
2. height width 均为100%， display为block 使得a的大小与div相重合。（所以实现hover的另外一个思路就是用a:hover）