AngularJS 导航栏动态添加.active

在传统jQuery中，实现导航栏动态添加.active类的思路比较简单，就是当点击的时候，清除其他.active，然后给当前类加上.active。

但是在AngularJS中，就不能再采用这种jQuery思维来实现了。

思路如下：

　　1、定义items，存储导航栏的内容

　　2、在html中，用ng-repeat 指令去变量items，输出导航栏的内容

　　3、用ng-class{'active', isActive(item.href)} 指令去判断当前的url与item.href是否相等,相等则加上.active

　　4、在controller的函数中 isActive(href)去判断，如果二者相等返回true

JS代码

.controller('HeaderCtrl', ['$scope','$location', function ($scope,$location) {
        $scope.items = [{
            id: '1', name: '首页', href: '#/'
        },{
            id: '2', name: '活期', href: '#/product/tmb'
        },{
            id: '3', name: '定期', href: '#/product/dcb'
        },{
            id: '4', name: '添牛', href: '#/product/tnb'
        },{
            id: '5', name: '安全', href: '#/security'
        },{
            id: '6', name: '账户', href: '#/profile'
        }]

        $scope.selected = 1;
        $scope.isActive = function (current) {
            var href = '#'+$location.url();
            return current === href;
        }
    }])

HTML代码

<ul id="nav1" class="nav nav-pills" role="tablist">
                <li role="presentation" ng-repeat="item in items">
                    <div class="header_home" ng-class="{'active':isActive(item.href)}">
                        <a ng-href="{{item.href}}" ><span class="h4">{{item.name}}</span></a>
                    </div>
                </li>
</ul>