<!--头部导航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);

                });

            }

        };

    })

 

Posted on 2017-04-14 09:39  LuciaHuang  阅读(343)  评论(1编辑  收藏  举报