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）