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放置动态的图形图像到功能区库中,在该文中,作者创建了两个库:一个 ...
随机推荐
- MRPT 安装使用
1. 安装mrpt ( apt-get ) $ sudo apt-get install mrpt-apps libmrpt-dev 2. 下载mrpt-1.3 链接:https://github.c ...
- RabbitMQ运行机制
AMQP中消息的路由过程和Java开发者熟悉的JMS存在一些差别,AMQP中增加了Exchange和Binding的角色,生产者把消息发布到Exchange上,Binding决定发布到Exchange ...
- 【vim】按时间回退文本 :earlier 1m
Vim 会记录文件的更改,你很容易可以回退到之前某个时间.该命令是相当直观的.比如: :earlier 1m 会把文件回退到 1 分钟以前的状态. 注意,你可以使用下面的命令进行相反的转换: :lat ...
- Libevent源码分析—event_add()
接下来就是将已经初始化的event注册到libevent的事件链表上,通过event_add()来实现,源码位于event.c中. event_add() 这个函数主要完成了下面几件事: 1.将eve ...
- springboot系列八、springboot整合kafka
背景: 当业务在同一时间出现高并发的时候,这个时候我们不想无限的增加服务器,但是又想提高吞吐量.这时可以考虑使用消息异步处理,进行消峰填谷:同时还可以降低耦合度.常见的消息中间件有kafka,rabb ...
- Oracle 正则表达式函数-REGEXP_REPLACE
背景 当初写oracle的一个存储过程,以前不知道sql里也有正则表达式,关于正则表达式教程很多了,这里只是记录下Oracle也有这个功能,下次再有类似需求用这个处理的确方便很多. 想起存储过程,就想 ...
- 无法下载apk等格式的文件的解决方案---ASP .NET Core 2.0 MVC 发布到IIS上以后无法下载apk等格式的文件的解决方案
ASP .NET Core MVC 发布到 IIS 上以后 无法下载apk等格式的文件 使用.NET Core MVC创建了一个站点,其他文件可以下载,但是后来又需求,就把手机端的apk合适的文件上 ...
- java 对象锁学习
机制 锁机制是用来解决多线程共享资源时产生的冲突问题的.java 为每一个对象关联一个对象锁,通常把锁分为对象锁和类锁,他们的本质都是对象锁,只不过对象锁关联的是类的 Object 对象 (java. ...
- jQuery .on() and .off() 命名空间
jQuery .on() and .off() 命名空间 博客分类: 生活 前端开发 jQuery1.7开始,jQuery引入了全新的事件绑定机制,jQuery .on() 和 off() 两个函 ...
- SQLite Manager插件安装与使用（firefox）
下载与安装: FireFox 插件:SQLite Manager可以管理你电脑上的任何 SQLite数据库.一个直观的目录树状来展示数据库的对象.通过提示对话来管理表.索引.视图和触发器.你能浏览和搜 ...