点击变色

       #menu{
            background-color: #9fcdff;
            height: 40px;
            list-style:none; /* 将默认的列表符号去掉 */
            padding:0; /* 将默认的内边距去掉 */
            margin:0; /* 将默认的外边距去掉 */
        }
        #menu li{
            display: inline-block;
            margin: 10px 20px;
        }
        #menu span{
            font:16px verdana, arial, sans-serif; /* 设置文字大小和字体样式 */
        }
       #menu li:hover{
            color: #ff6600; border-bottom: 2px solid #ff6600; /* 鼠标悬停*/
        }
        .active {
            color: #ff6600; border-bottom: 2px solid #ff6600;
        }

单个
<p ng-click="state=1;" ng-class="{active:state==1}">浮伤年华</p>
<p ng-click="state=2;" ng-class="{active:state==2}">忧伤说笑</p>

多个循环

<div>
    <ul id="menu">
        <li ng-repeat="x in records" ng-click="isActive( x.id)"  ng-class="{active:state==x.id}">
            <span> {{ x.name}}</span>
        </li>
    </ul>

</div>

  $scope.records = [
            {'id': '1', name: '今天'},
            {'id': '2', name: '本月' },
            {'id': '3', name: '去年'}
            ]

  $scope.isActive = function (i) {
            $scope.state = i;
        }

或者：

<div ng-class="{true:'change1',false:'change2'}[className]">
    反反复复凤飞飞
</div>

$scope.className=true;

样式布置：

<ul id="menu">
    <li ng-repeat="x in records" ng-click="isActive( x.id)"  ng-class="{active:state==x.id}">
        <span class="tupian">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        &nbsp;
        <span> {{ x.name}}</span>
    </li>
</ul>

.tupian{
    background:url(./imgs/beijing.png) no-repeat;
}

.active {
    color: #ff6600; border-bottom: 2px solid #ff6600;
}
.active .tupian{
    background:url(./imgs/gaoji.png);
    background-repeat:no-repeat;
}