效果图：

1.HTML模版：

<div class="col-lg-12 orgUserPicker-pickArea fancy-scrollbar" style="overflow-y: auto; overflow-x: hidden;width: 275px;">
            <div class="org-sel-users" data-ng-hide="noneResult" data-ng-show="docIndex_List.length != 0">
                <ul class="docIndex_List" style="padding:10px 0;">
                    <li class="docIndex_List_Item"  data-ng-repeat="Item in docIndex_List" ng-class="{showNext : showItemId == Item.menueId || showItemPmenueId == Item.menueId, theLowest : !Item.haveChild , haveChild : Item.haveChild, isClose : showItemPmenueId != Item.menueId || !tiggerShow}">
                           <span ng-class="{haveThe_Next : Item.haveChild,witheFont: showItemId == Item.menueId}" style="width: 245px;display: block;"  ng-click="setShowItemId(Item)">{{Item.menueName}}</span>
                           
                                   <div class="theLowest_Btn itermText_Center" ng-class = "{haveChild_Btn : Item.haveChild}">
                                         <a data-ng-click="editMenuTtem(Item)" title="编辑" class="itermText_Center" style="height: 28px;width: 28px;background-color:#00483a;">
                                        <img data-ng-src="images/common/edit.png" src="images/common/edit.png" class="">
                                    </a>
                                    <a data-ng-click="deleteMenuTtem(Item)" title="删除" class="itermText_Center" style="height: 28px;width: 28px;background-color:#bf4d4d;">
                                        <img data-ng-src="images/common/close.png" src="images/common/close.png" class="">
                                    </a>   
                                     </div>
                           <div class="docIndex_List_NextBox" style="width: 275px;margin-left: -15px;padding: 0 15px;">
                           
                           <ul class="docIndex_List docIndex_List_Next" data-ng-show = "(showItemId == Item.menueId || showItemPmenueId == Item.menueId)&&tiggerShow">
                              <li class="docIndex_List_Item theLowest" data-ng-repeat="childItem in Item.childMenues" ng-class="{showNext : showItemId == childItem.menueId}"  ng-click="setShowItemId(childItem)">
                                 <span  ng-class="{witheFont : showItemId == childItem.menueId}">{{childItem.menueName}}</span> 
                                     <div class="theLowest_Btn itermText_Center">
                                         <a data-ng-click="editMenuTtem(childItem)" title="编辑" class="itermText_Center" style="height: 28px;width: 28px;background-color:#00483a;">
                                        <img data-ng-src="images/common/edit.png" src="images/common/edit.png" class="">
                                    </a>
                                    <a data-ng-click="deleteMenuTtem(childItem)" title="删除" class="itermText_Center" style="height: 28px;width: 28px;background-color:#bf4d4d;">
                                        <img data-ng-src="images/common/close.png" src="images/common/close.png" class="">
                                    </a>   
                                     </div>
                              </li>
                            </ul>
                            
                           </div>      
                    </li>
                </ul>
            </div>
            <div data-ng-show="docIndex_List.length == 0" style="text-align: center;margin-top: 100px;font-size: 15px;font-weight: bold;" class="ng-hide">
                    暂无文档分级
            </div>
        </div>
View Code

2.控制器方法：

$scope.docIndex_List = [];                 //分级列表对象
        if($rootScope.docShowItem){
            $scope.showItemId =  $rootScope.docShowItem.menueId || "";
            $scope.showItemPmenueId =  $rootScope.docShowItem.pmenueId || "";
        }else{
            $scope.showItemId =  "";
            $scope.showItemPmenueId = "";
        }
        $scope.tiggerShow = false;
        

$scope.setShowItemId = function(ID){
            //tiggerShow 是否展开     true：展开     false：不展开
            //展开场景： 1.第一次选取有二级的一级栏目        2.点击二级栏目
            if(ID.childMenues && $scope.showItemPmenueId != ID.childMenues[0].pmenueId){
                $scope.tiggerShow = true;
            }
            if(ID.childMenues && $scope.showItemPmenueId == ID.childMenues[0].pmenueId){
                $scope.tiggerShow = $scope.tiggerShow?false:true;
            }
            if(ID.childMenues && ID.pmenueId != '' && ID.pmenueId == $scope.showItemPmenueId){
                $scope.tiggerShow = true;
            }
            if(ID.pmenueId != ''){
                $scope.showItemId = ID.menueId;
            }else{
                $scope.showItemId = $scope.showItemId == ID.menueId?"":ID.menueId;
            }
            $scope.showItemPmenueId = ID.pmenueId?ID.pmenueId:"";
            $rootScope.docShowItem = ID;
            if(ID.childMenues){
                $scope.showItemId = ID.childMenues[0].menueId;
                $scope.showItemPmenueId = ID.childMenues[0].pmenueId;
                $rootScope.docShowItem = ID.childMenues[0];    
            }
            
            queryDocFileList();//获取数据方法
        }
View Code

3.测试数据

$scope.docIndex_List = [{"menueId":"04fbc3d194ce466dbc70cb8f04ac250c","level":1,"menueName":"新增一级","createTime":1522380791995,"userId":"0002","childMenues":[{"menueId":"c87de455bbf14a2ea0236cfd293b8de0","level":2,"menueName":"新增二级02","pmenueId":"04fbc3d194ce466dbc70cb8f04ac250c","createTime":1522380814114,"userId":"0002"},{"menueId":"4e4f6e0feb5848879441e92f90a728da","level":2,"menueName":"新增二级01","pmenueId":"04fbc3d194ce466dbc70cb8f04ac250c","createTime":1522380804248,"userId":"0002"}]},{"menueId":"8e31912d2d9c43e2a9e8a20a39204ba9","level":1,"menueName":"远光制度","createTime":1522031990858,"userId":"0002"},{"menueId":"45ebbdcd362340068cd9546ac64ea66d","level":1,"menueName":"test","createTime":1521787642802,"userId":"0002"}]
View Code