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放置动态的图形图像到功能区库中,在该文中,作者创建了两个库:一个 ...
随机推荐
- Freemarker取list集合中数据(将模板填充数据后写到客户端HTML)
1.模板写法: <html> <head> <title>freemarker测试</title> </head> <body> ...
- jQuery-contextMenu使用教程
jQuery-contextMenu使用教程 效果如下图所示.在[右击菜单]处右击,会出现下面的效果. 添加引用 <script src="jQuery-contextMenu-mas ...
- Pytorch 之 backward
首先看这个自动求导的参数: grad_variables:形状与variable一致,对于y.backward(),grad_variables相当于链式法则dz/dx=dz/dy × dy/dx 中 ...
- 理解 Linux 配置文件【转】
转自:http://www.ibm.com/developerworks/cn/linux/management/configuration/ 分类和使用 本文说明了 Linux 系统的配置文件,在多 ...
- Linux下rsyslog日志收集服务环境部署记录【转】
rsyslog 可以理解为多线程增强版的syslog. 在syslog的基础上扩展了很多其他功能,如数据库支持(MySQL.PostgreSQL.Oracle等).日志内容筛选.定义日志格式模板等.目 ...
- Android: SlidingDrawer（滑动式抽屉）
Android控件之SlidingDrawer(滑动式抽屉)详解与实例 一.简介 SlidingDrawer隐藏屏外的内容,并允许用户通过handle以显示隐藏内容.它可以垂直或水平滑动,它有俩个V ...
- MonkeyRunner之MonkeyRecorder录制回放脚本（亲测可正常运行）
MonkeyRunner可以录制和回放脚本 前置条件: 电脑连接手机,输入adb devices 看看返回是否手机设备列表(我是真机,模拟器也可以) 配置好安卓sdk和Python环境 step: 1 ...
- vue系列之webpack
webpack 地址: https://github.com/vuejs-templates/webpack 注意里面的template,用webpack创建的项目,结构就是这样的
- 【linux】crontab失效
在linux上,crontab任务全部使用完整路径,但是任务无效. 检测crontab 服务是否启动, /etc/init.d/cron status /etc/init.d/cron restart
- windows下安装GIT，使用GIT GUI 上传文件到github
安装 1.从官网 https://git-scm.com/download/win下载安装包 2.打开安装包安装,点击next,接着再点击三次next 3.在下拉菜单中选择已安装的文本编辑器,点击ne ...