Angular1实现树形结构(ztree)菜单示例代码

整个菜单的标签如下

 

< div id = "left-menu" ng-controller = "Left-navigation" class = "col-sm-2" style = "margin-top: 50px" >

   < ul >

 

    

     < li >

  

       < a href = "" ng-click = "navFunc('dashboard')" >仪表盘 a >

     li >

 

    

     < li >

       < span >< a ng-click = "navFunc('hosts')" href = "" >主机 a > span >

      

   < ul ng-show = "navAction === 'hosts'" >

         < li >< a href = "" >主机 a > li >

         < li >< a href = "" >分组 a > li >

       ul >

     li >

 

    

     < li >

       < a href = "" ng-click = "navFunc('container')" >容器 a >

     li >

 

    

     < li >

       < span >< a href = "" ng-click = "navFunc('template')" >模板 a > span >

       < ul ng-show = "navAction === 'template'" >

         < li >< a href = "" >监控 a > li >

         < li >< a href = "" >装机 a > li >

       ul >

     li >

 

    

     < li >

       < span >< a href = "" ng-click = "navFunc('users')" >用户 a > span >

       < ul ng-show = "navAction === 'users'" >

         < li >< a href = "" >修改资料 a > li >

         < li >< a href = "" >修改密码 a > li >

         < li >< a href = "" >添加用户 a > li >

         < li >< a href = "" >消息 a > li >

       ul >

     li >

 

    

     < li >

       < a href = "" ng-click = "navFunc('configuration')" >配置 a >

     li >

 

   ul >

div >

JS代码如下

 

// 创建myApp模块

var myApp = angular.module( 'myApp' , [])

 

// 创建一个controller，名为Left-navigation

myApp.controller( 'Left-navigation' , [ '$scope' , function ($scope) {

   // 定义一个函数navFunc， 接受一个参数

  $scope.navFunc = function (arg) {

  // 让navAction变量等于函数传入过来的值arg

     $scope.navAction = arg;

   };

}]);

---

想要整理更多的碎片知识，扫码关注下面的公众号，让我们在哪里接着唠！