zoukankan      html  css  js  c++  java
  • Angularjs 根据数据结构创建动态菜单无限嵌套循环--指令版

    目标:根据数据生成动态菜单,希望可以根据判断是否有子集无限循环下去。

    菜单希望的样子是这样的:

    菜单数据是这样的:

     1 $scope.expanders = [{
     2     title: 'title1',
     3     link: 'xx/xx',
     4     child:[
     5      {
     6         title: 'child2',
     7         link: 'xx/xx'
     8       },
     9        {
    10         title: 'child3',
    11         link: 'xx/xx',
    12         child:[
    13             {
    14             title: 'child5',
    15             link: 'xx/xx'
    16           }
    17         ]
    18       }
    19     ]
    20   }, {
    21     title: 'title2',
    22     link: 'xx/xx'
    23   }, {
    24     title: 'title3',
    25     link: 'xx/xx'
    26   }];

     那么下面贴下代码,主要是用指令无限递归实现的:

    1.js

     1 var myModule = angular.module('myApp', []);
     2 
     3 myModule.controller('TestController', ['$rootScope', '$scope', function($rootScope, $scope) {
     4   $scope.expanders = [{
     5     title: 'title1',
     6     link: 'xx/xx',
     7     child:[
     8      {
     9         title: 'child2',
    10         link: 'xx/xx'
    11       },
    12        {
    13         title: 'child3',
    14         link: 'xx/xx',
    15         child:[
    16             {
    17             title: 'child5',
    18             link: 'xx/xx'
    19           }
    20         ]
    21       }
    22     ]
    23   }, {
    24     title: 'title2',
    25     link: 'xx/xx'
    26   }, {
    27     title: 'title3',
    28     link: 'xx/xx'
    29   }];
    30 }]);
    31 
    32 myModule.directive('accordion', function($compile) {
    33   return {
    34     restrict: 'EA',  
    35     replace:true,
    36     scope:{
    37       expander:'=',
    38       child:'='
    39     },
    40     template: "<ul  > <li>{{expander.title}}</li></ul>",
    41     link: function(scope,elm) { 
    42     if(scope.child){
    43     var html=$compile("<accordion   expander='expander' child='expander.child' ng-repeat='expander in child'></accordion>")(scope);
    44         elm.append(html)
    45     }
    46          
    47     }
    48   };
    49 });

    1.html

    1 <body ng-app="myApp">
    2   <section ng-controller="TestController">
    3     <accordion expander='expander' child='expander.child' ng-repeat='expander in expanders'> 
    4     </accordion>
    5   </section>
    6 </body>
  • 相关阅读:
    python作业堡垒机(第十三周)
    Python的一个BOX
    Nginx (限速)限制并发、限制访问速率、限制流量
    Nginx反向代理维基百科镜像制作全解析
    防盗链测试01
    Pycharm和IntelliJ IDEA激活 2017.3.x版本
    [Openwrt 扩展下篇] Openwrt搭建私有云Owncloud 9
    [Openwrt扩展中篇]添加Aria2和webui
    [Openwrt 扩展上篇]USB挂载&U盘启动&Samba共享
    python作业(第十一周)基于RabbitMQ rpc实现的主机管理
  • 原文地址:https://www.cnblogs.com/dannyxie/p/6532512.html
Copyright © 2011-2022 走看看