angularjs 选项卡tab切换（移动端用户订单状态）

<!--头部导航tabs切换-->

<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">

<div class="tabs buy_nav buy_list_nav">

<ul>

<li class="tab-item buy_color activated" toggle-class="activated" ng-click="changeStatus2(0)"><a href="javascript:void(0)">全部</a></li>

<li class="tab-item buy_color" toggle-class="activated" ng-click="changeStatus2(1)"><a href="javascript:void(0)">待付款</a></li>

<li class="tab-item buy_color" toggle-class="activated" ng-click="changeStatus2(2)"><a href="javascript:void(0)">待发货</a></li>

</ul>

</div>

</div>

</div>

<!--主要内容分三部分选择-->

　<div class="list buy_list_con" ng-show="buyall" >

　　...

　　</div>

　　<div class="list buy_list_mine" ng-show="buymine">

　　...

　　</div>

　　<div class="list buy_list_return" ng-show="buyreturn">

　　...

　　</div>

<!--以下是该页面控制器-->

.controller('buy_listCtrl',function($scope) {

$scope.buyall = true;

$scope.changeStatus2=function (status) {

// console.log(status);

if(status==0){

$scope.buyall = true;

$scope.buymine = false;

$scope.buyreturn = false;

}else if(status==1){

$scope.buymine = true;

$scope.buyall = false;

$scope.buyreturn = false;

}else if(status==2){

$scope.buyreturn = true;

$scope.buyall = false;

$scope.buymine = false;

}

}

})

<!--在控制器加入指令-->

.directive('toggleClass', function(){

return {

restrict: 'A',

scope: {

toggleClass: '@'

},

link: function(scope, element,attrs){

element.on('click', function(){

element.parent().children().removeClass(scope.toggleClass);

element.addClass(scope.toggleClass);

});

}

};

})