angularjs左侧菜单

angularjs二级菜单以及路由跳转

html部分

// 页面
 <div class="leftMenu">
                <!--菜单-->
                <ul class="navMenu">
                    <li ng-click="changNavMenu(item,navArr,item.hasChild)" ng-class="{active:item.active}"
                        ng-repeat="item in navArr">
                        <a href="javascript:;"> <i class="{{item.icon}}"></i>{{item.title}}
                            <i class="icon-angle-right arrow" ng-class="{icon-angle-down:showItem&&item.active}" ng-if="item.hasChild"></i>
                        </a>
                        <ul class="subMenu closeSubMenu"
                            ng-class="{true:'subMenu',false:'closeSubMenu'}[showItem&&item.active]">
                            <li ng-if="item.hasChild" ng-class="{active:i.active&&item.active}"
                                ng-click="changTwoNav(i,item.data)" ng-repeat="i in item.data">
                                <a href="javascript:;">{{i.title}}</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>

js部分

// 菜单
    $scope.navArr = [
        {
            title: '基础信息管理',
            id: 1,
            hasChild: true,
            icon: 'icon-home',
            data: [
                {title: '旅客管理', url: '/basicInformation/passengerManage'},
                {title: '车辆管理', url: '/basicInformation/vehicleManage'},
                {title: '手机管理', url: '/basicInformation/phoneInfo'}
            ]
        }, {
            title: '场所管理',
            id: 2,
            hasChild: true,
            icon: 'icon-hospital',
            data: [
                {title: '人员管理', url: ''},
                {title: '场所管理', url: ''}
            ]
        }, {
            title: '安全检查',
            id: 3,
            hasChild: false,
            icon: 'icon-check',
            url: ''
        }, {
            title: '通知通告',
            id: 4,
            hasChild: false,
            icon: 'icon-bullhorn',
            url: ''
        }
    ];



    $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) {
        $state.go(item.url);
        for (var i of arr){
            i.active=false;
        }
        item.active=true;

    };

css

.navMenu > li > a {
    display: block;
    padding-left: 30px;
    line-height: 50px;
    font-size: 16px;
    color: #fff;
    position: relative;
}

.navMenu li a {
    color: #fff;
}

.navMenu li a i {
    color: #fff;
    font-size: 22px;
    padding-right: 10px;
}

.navMenu > .active > a {
    background-color: #2c384b;
    border-right: 3px solid #4877e6;
    text-decoration: none;
}

.subMenu li.active{
    display: block;
    color: #4877e6;
    background-color: #2c384b;
    border-left: 2px solid #4877e6;
}

.closeSubMenu {
    display: none;
}
.subMenu li {
    padding: 10px;
}
.subMenu li a {
    padding-left: 50px;
}
.arrow{
    position: absolute;
    right: 10px;
    top: 15px;
}

参考文件: https://blog.csdn.net/weixin_40829594/article/details/86489471.