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放置动态的图形图像到功能区库中,在该文中,作者创建了两个库:一个 ...
随机推荐
- JSON的理解
官方解释: JSON的全称是”JavaScript Object Notation”,单单从字面上的理解就是JavaScript对象表示法,它是一种基于文本,独立于语言的轻量级数据交换格式. 理解: ...
- JAVA中的引用
关于值类型和引用类型的话题,C++.JAVA.python.go.C#等等高级语言都有相关的概念,只要理解了其底层工作原理,可以说即使是不同的语言,在面试学习工作实践中都可以信手拈来(不要太纠集语言) ...
- ARMV8 datasheet学习笔记4：AArch64系统级体系结构之Generic timer
1.前言 2.generate timer 2.1 概述 提供了一个系统计数器,用来实时测量流逝的时间: 提供了一个虚拟计数器,用来测量某个虚拟机上流逝的虚拟时间: 定时器,每隔一段时间会触发事件,支 ...
- WebSphere的jython编码的一个坑
was5.1版本,用"name=" in line这类判断字符串包含的方式时,系统会提示报错 TypeError: string member test needs char le ...
- 日常用的css基础和自己常用的js封装
css基础:base /* * 初始化 */ *::after, *::before { box-sizing: border-box; } body { font-family: 'Microsof ...
- MonkeyRunner之MonkeyRecorder录制回放脚本（亲测可正常运行）
MonkeyRunner可以录制和回放脚本 前置条件: 电脑连接手机,输入adb devices 看看返回是否手机设备列表(我是真机,模拟器也可以) 配置好安卓sdk和Python环境 step: 1 ...
- Linux mount 修改文件系统的读写属性
有时候要在某个文件夹下添加和删除文件时,显示 "read only filesystem",说明该文件系统是只读的不能修改.使用 mount –o remount,rw / 命令可 ...
- R-FCN：安装训练自己的数据
参考:http://blog.csdn.net/sinat_30071459/article/details/53202977 如果用的是cudnnv5,可能会遇到问题,下载最新的caffe,替换这部 ...
- python之类中的super函数
作用 实现代码重用 思考:super真的只是调用父类么? super函数是按照mro算法去调用的,不bb上代码: class A: def __init__(self): print('A') cla ...
- 性能测试二十：环境部署之Tomcat多实例部署+日志监控
一个tomcat性能有限,所以需要部署等多个tomcat 单实例部署与windows下类似,项目包放到webapp目录下,启动bin目录下的startup.sh即可启动命令:./startup.sh启 ...