Angularjs 根据数据结构创建动态菜单无限嵌套循环--指令版
目标：根据数据生成动态菜单，希望可以根据判断是否有子集无限循环下去。
菜单希望的样子是这样的：
菜单数据是这样的：
$scope.expanders = [{
title: 'title1',
link: 'xx/xx',
child:[
{
title: 'child2',
link: 'xx/xx'
},
{
title: 'child3',
link: 'xx/xx',
child:[
{
title: 'child5',
link: 'xx/xx'
}
]
}
]
}, {
title: 'title2',
link: 'xx/xx'
}, {
title: 'title3',
link: 'xx/xx'
}];
那么下面贴下代码，主要是用指令无限递归实现的：
1.js
var myModule = angular.module('myApp', []);
myModule.controller('TestController', ['$rootScope', '$scope', function($rootScope, $scope) {
$scope.expanders = [{
title: 'title1',
link: 'xx/xx',
child:[
{
title: 'child2',
link: 'xx/xx'
},
{
title: 'child3',
link: 'xx/xx',
child:[
{
title: 'child5',
link: 'xx/xx'
}
]
}
]
}, {
title: 'title2',
link: 'xx/xx'
}, {
title: 'title3',
link: 'xx/xx'
}];
}]);
myModule.directive('accordion', function($compile) {
return {
restrict: 'EA',
replace:true,
scope:{
expander:'=',
child:'='
},
template: "<ul > <li>{{expander.title}}</li></ul>",
link: function(scope,elm) {
if(scope.child){
var html=$compile("<accordion expander='expander' child='expander.child' ng-repeat='expander in child'></accordion>")(scope);
elm.append(html)
}
}
};
});
1.html
<body ng-app="myApp">
<section ng-controller="TestController">
<accordion expander='expander' child='expander.child' ng-repeat='expander in expanders'>
</accordion>
</section>
</body>
Angularjs 根据数据结构创建动态菜单无限嵌套循环--指令版的更多相关文章
- delphi创建动态菜单
1.动态生成菜单项 varFirstItem: TMenuItem;SecondItem: TMenuItem; begin FirstItem := TMenuItem.Create(Self); ...
- WIN 下的超动态菜单（一）
WIN 下的超动态菜单(一)介绍 WIN 下的超动态菜单(二)用法 WIN 下的超动态菜单(三)代码 作者:黄山松,发表于博客园:http://www.cnblogs.com/tomview/ ...
- PHP实现菜单无限极分类
菜单数据 这里我们的菜单数据是临时数据, 没有从数据库中查询处理,数据基本和数据库中的的相似. 数据如下: $items = array( 1 => array('id' => 1, 'p ...
- .net core3.1 abp动态菜单和动态权限（动态菜单实现和动态权限添加） （三）
我们来创建动态菜单吧 首先,先对动态菜单的概念.操作.流程进行约束:1.Host和各个Tenant有自己的自定义菜单2.Host和各个Tenant的权限与自定义菜单相关联2.Tenant有一套默认的菜 ...
- tp根据数据库动态创建微信菜单
喻可伟的博客 tp根据数据库动态创建微信菜单 $button = array();$class = M('ucenter_menu')->limit(3)->select();//取出 ...
- MFC之创建多级动态菜单
一开始以我是这样做的,结果是错误的: 这段代码第一次点击时,会在第6个位置创建MFC菜单,我本以为再次点击,menu->GetSubMenu(5)返回的值就不会为空了,但事实是它返回了NULL, ...
- winform快速开发平台 -> 通用权限管理之动态菜单
这几个月一直忙APP的项目,没来得及更新项目,想想该抽出时间整理一下开发思路,跟大家分享,同时也希望得到宝贵的建议. 先说一下我们的权限管理的的设计思路,首先一个企业信息化管理系统一定会用到权限管理, ...
- WIN 下的超动态菜单（三）代码
WIN 下的超动态菜单(一)简介 WIN 下的超动态菜单(二)用法 WIN 下的超动态菜单(三)代码 作者:黄山松,发表于博客园:http://www.cnblogs.com/tomview/ 超动态 ...
- Ribbon2: 创建动态的Ribbon库
Sam Radakovitz曾在Excel团队博客中发表过一篇文章,介绍了如何创建动态的Ribbon库,即如何通过RibbonX和VBA放置动态的图形图像到功能区库中,在该文中,作者创建了两个库:一个 ...
随机推荐
- kali linux 下搭建git服务器
参考:http://www.cnblogs.com/dee0912/p/5815267.html https://www.liaoxuefeng.com/wiki/001373951630592960 ...
- Centos7.5 防火墙设置
Centos7.5默认使用firewalld作为防火墙 1.查看firewalld服务状态 systemctl status firewalld 2.查看firewalld的状态 firewall-c ...
- python内置模块之unittest测试（五）
系列文章 python模块分析之random(一) python模块分析之hashlib加密(二) python模块分析之typing(三) python模块分析之logging日志(四) pytho ...
- window系统下远程部署Tomcat
远程访问windows系统,在windows系统上启动tomcat,发布项目.1.拨VPN2.远程桌面连接,cmd --> mstsc 回车,弹出远程桌面连接窗口 3.输入计算机IP:132.2 ...
- 一个shell的面试题
5.写一个脚本,实现判断192.168.1.024网络里,当前在线的D有哪些,能ping通则认为在线,在线输出"TP地址UP",不在线输出TP地址DOWN",无其他输出. ...
- nagios系列(二)之nagios客户端的安装及配置
1.添加nagios用户 echo "------ step 1: add nagios user------" #create user group /usr/sbin/user ...
- python环境下使用tab自动补全命令
# vim /usr/lib/python2.7/dist-packages/tab.py 加入如下内容: #!/usr/bin/env python # python startup file im ...
- 转载：《RESTful API 设计指南》 阮一峰
原文:http://www.ruanyifeng.com/blog/2014/05/restful_api 网络应用程序,分为前端和后端两个部分.当前的发展趋势,就是前端设备层出不穷(手机.平板.桌面 ...
- 转载：Linux内核参数的优化（1.3.4）《深入理解Nginx》（陶辉）
原文:https://book.2cto.com/201304/19615.html 由于默认的Linux内核参数考虑的是最通用的场景,这明显不符合用于支持高并发访问的Web服务器的定义,所以需要修改 ...
- jquery之jsonp相关知识
这里讲的不错,可以参考:链接 我自己的理解: 服务器为了保证数据的安全,同时也为了保证不被攻击, 凡是来服务器请求的url,域名必须和服务器一致,否则就是跨域请求 为了解决跨域问题,就出现了jsonp ...