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

整个菜单的标签如下

 

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

   < ul >

 

     <!-- 仪表盘 -->

     < li >

   <!-- 让每一个一级菜单绑定一个函数navFunc，并且传入一个指定的字符串 -->

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

     </ li >

 

     <!-- 主机 -->

     < li >

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

       <!-- 如果要显示二级菜单，则navAction必须等于制定的字符串，这个是自己定义的，navAction是在controller中创建的 -->

   < 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;

   };

}]);

---

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