【angular】angular实现简单的tab切换

html:

 <div class="list-group" ng-repeat="tab in menuList">
     <a href="#" class="list-group-item" ng-class="{'active':isActiveTab(tab.state)}" ng-click="onClickTab(tab)" ng-bind="tab.name" ui-sref="tab.state"></a>
 </div>

controller:

 myApp.controller('menuCtrl',function ($scope) {
     $scope.menuList=[
         {
             name:"filter",
             state:"filter"
         },
         {
             name:"directive",
             state:"directive"
         }
     ]
 //默认第一个菜单是点击以后的样式
     $scope.currentTab=$scope.menuList[0].name;
 //将当前的state赋值给currentTab
     $scope.onClickTab=function (tab) {
         $scope.currentTab=tab.state;
     }
 //判断点击的是否是当前菜单
     $scope.isActiveTab=function (tab) {
         return tab==$scope.currentTab;
     }
 })