在传统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>