angular实现导航菜单切换

$scope.navArr=[{         task:{             title: "我的任务",             showAdd: true,             data:[                 {                     title:'我的设计院',                     id:1,                     hasChild:false,                     active:true,                 },                 {                     title:'我加入的设计院',                     id:2,                     hasChild:true,                     active:false,                     data:[                         {title:"设计院1",active:true},                         {title:"设计院2",active:false}                     ]                 },                 {                     title:'验证消息',                     id:3,                     hasChild:false,                     active:false,                 },                 {                     title:'我参与的设计院',                     id:3,                     hasChild:true,                     active:false,                     data:[                         {title:"设计院3",active:true},                         {title:"设计院4",active:false}                     ]                 },             ]         }         }];          $scope.showItem=false;     $scope.showId=null;     //给菜单项添加事件     $scope.changNavMenu=function(item,arr,hasChild){         for(let i of arr){             if(i==item){                 i.active=true;                 showNav(hasChild,i.id)             }else{                 i.active=false;              }         }     }     function showNav(hasChild,id){         if($scope.showId!=id){             $scope.showItem=false;             $scope.showId=id;         }         if(hasChild){             if($scope.showItem==false){                 $scope.showItem=true             }else if($scope.showItem==true){                 $scope.showItem=false             }         }     }     // 给二级菜单添加点击事件     $scope.changTwoNav=function(item,arr){         for(let i of arr){             if(i==item){                 i.active=true;             }else{                 i.active=false;              }         }         event.stopPropagation();     }

      
{{navArr[0].task.title}}
      
     + 快速立项   
      
     
        {{item.title}}       
         
             {{i.title}}         
       
     
   
   

.two_level_box{   float:left;   width: 139px;   height: 100%;   background: #fff; } .menu-title{   margin:10px; } .add-pro-btn{   cursor: pointer;   margin:10px; } .add-pro-btn span{   display: inline-block;   width:100%;   text-align: center;   border:1.5px solid #EE6133;   border-radius: 20px;   padding:2px;   color:#EE6133; } .navMenu>li>a{   margin:8px 0;   padding:10px; } .navMenu>li{   margin:8px 0;   padding:0; } .navMenu li a{   color:#000; } .navMenu>.active>a{   color:#EE6133; } .subMenu .active{   background-color: #FACFC1;   border-right:2px solid #EE6133; } .closeSubMenu{   display: none; } .subMenu li{   padding:5px 0;   border-right:2px solid #fff; } .subMenu li a{   padding-left:30px; } .navMenu b{   display: inline-block;   width:8px;   height:0;   border-left:5px solid #A9A9A9;   border-top:4px solid transparent;   border-bottom:4px solid transparent; } .navMenu .b_active{   border-top:5px solid #A9A9A9;   border-left:4px solid transparent;   border-right:4px solid transparent; }