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放置动态的图形图像到功能区库中,在该文中,作者创建了两个库:一个 ...
随机推荐
- AutoMapper中用户自定义转换
Custom Type Converters Sometimes, you need to take complete control over the conversion of one type ...
- js的正则表达式编程，悬赏解决下面的问题
悬赏解决下面的问题 1.切分url 2.将时间日期 转化为 yyyy-MM-dd的模式和可逆性 3.数据的千分位和可逆性 4.用C#或者nodejs检索如下的模式 h1{ border:1px sol ...
- python之random模块分析（一）
random是python产生伪随机数的模块,随机种子默认为系统时钟.下面分析模块中的方法: 1.random.randint(start,stop): 这是一个产生整数随机数的函数,参数start代 ...
- [转]数据对齐对CPU的影响
[转]http://www.cnblogs.com/wuzhenbo/archive/2012/06/05/2537465.html 1.前言 在IBM开发社区上发现一篇叫'Data alignmen ...
- python标准库之secrets
secrets secrets是python3.6加入到标准库的,使用secrets模块,可以生成适用于处理机密信息(如密码,帐户身份验证,安全令牌)的加密强随机数. 导入 import secret ...
- mysql系列六、mysql创建用户、授权、备份及恢复命令
一.创建用户和授权 下面的操作中,其中someusername为用户名,somepassword为密码,somedbname为数据库名 1.创建用户 create user 'someusername ...
- matplotlib画图
matplotlib画图 import numpy as np import matplotlib.pyplot as plt x1=[20,33,51,79,101,121,132,145,162, ...
- SpringBoot入门小案例
1.创建一个简单的maven project项目 2.下面来看一下项目结构: 3.pom.xml 配置jar包 <parent> <groupId>org.springfram ...
- java 格式化
一. 可以之际像c语言一样用System.out.printf()格式化输出 二. System.out.format 1. format()方法模仿自printf(), 可用于PrintStream ...
- poj1470 LCA倍增法
倍增法模板题 #include<iostream> #include<cstring> #include<cstdio> #include<queue> ...