如何使用angularjs处理动态菜单

JavaScript05

如何使用angularjs处理动态菜单,第1张

思路：只要根据用户角色 显示该角色可以访问的菜单即可，在每次路由切换的时候判断下是否有访问此路由的权限，没有就跳转到指定页面即可。

如果要想根据角色动态生成路由，可以在angular还没有启动的时候获取该用户角色的所有路由（也可以说菜单），然后循环菜单 通过 ui-router动态加入即可；

一般项目把所有的js和模板都打包压缩成一个js，反而效果更好；

<!DOCTYPE html>

<html>

<head>

<title>制作无限下拉菜单咋整 前台JS 【数组嵌套json】后台TP5 </title>

<meta charset="UTF-8" />

<script>

//菜单类 1.盒子id 2.菜单数组

function Menu(boxId, menus){

//创建菜单

this.create = function(level){

var element = document.createElement('ul'),

item = null,  //当前项目

title = null  //项目标题

level = level ? level : 0  //当前等级，没有传参数为顶级

for(var i in menus){

if(level == menus[i].gid){

item = document.createElement('li')

title = document.createElement('span')

title.innerHTML = menus[i].title

item.appendChild(title)

item.appendChild(this.create(menus[i].id))

element.appendChild(item)

}

}

return element

}

this.box = document.getElementById(boxId)

this.box.appendChild(this.create())

}

window.onload = function(){

var menus = [

{"id" : "1", "gid" : "0", "title" : "客户管理", "statue" : "0", "url" : "/sets/1"},

{"id" : "2", "gid" : "1", "title" : "客户列表", "statue" : "0", "url" : "/sets/2"},

{"id" : "3", "gid" : "1", "title" : "客户状态", "statue" : "0", "url" : "/sets/3"},

{"id" : "4", "gid" : "3", "title" : "睡着的", "statue" : "0", "url" : "/sets/4"},

{"id" : "5", "gid" : "3", "title" : "发财的", "statue" : "0", "url" : "/sets/5"},

{"id" : "6", "gid" : "4", "title" : "眯着眼睡的", "statue" : "0", "url" : "/sets/6"},

{"id" : "7", "gid" : "0", "title" : "员工管理", "statue" : "0", "url" : "/sets/7"},

{"id" : "8", "gid" : "0", "title" : "等级管理", "statue" : "0", "url" : "/sets/8"},

{"id" : "9", "gid" : "0", "title" : "客户管理2", "statue" : "0", "url" : "/sets/9"},

{"id" : "10", "gid" : "7", "title" : "准备滚蛋的", "statue" : "0", "url" : "/sets/10"},

{"id" : "11", "gid" : "10", "title" : "带着铺盖滚蛋的", "statue" : "0", "url" : "/sets/11"},

{"id" : "12", "gid" : "0", "title" : "系统设置", "statue" : "0", "url" : "/sets/12"},

{"id" : "13", "gid" : "2", "title" : "大海设置", "statue" : "0", "url" : "/sets/13"}

]

var menu = new Menu('menus', menus)

}

</script>

</head>

<body>

<div id="menus"></div>

</body>

</html>

这个代码可以无限级别，思路就是寻找当前对象的子对象

改改样式就可以了，如果想设置为点击或者鼠标移动到上面时候展开，只需要给li绑定事件控制子元素ul的display即可，不会写的话追问，多给点分我的更有动力哦。。

带阴影的时间：

<html>

<head>

<style type="text/css">

<!--

.time{

font-family : Comic Sans Ms

font-size : 14pt

font-weight : bold

color: #00008D

}

-->

</style>

<style type="text/css">

<!--

.time{

font-family : Comic Sans Ms

font-size : 14pt

font-weight : bold

color: #00008D

}

-->

</style>

</head>

<script Language="JavaScript">

<!-- Hiding

var ctimer

function init(){

if (document.all){

tim2.style.left=tim1.style.posLeft

tim2.style.top=tim1.style.posTop+tim1.offsetHeight-6

settimes()

}

}

function settimes(){

var time= new Date()

hours= time.getHours()

mins= time.getMinutes()

secs= time.getSeconds()

if (hours<10)

hours="0"+hours

if(mins<10)

mins="0"+mins

if (secs<10)

secs="0"+secs

tim1.innerHTML=hours+":"+mins+":"+secs

tim2.innerHTML=hours+":"+mins+":"+secs

ctimer=setTimeout('settimes()',960)

}

// -->

</script>

<body onLoad="init()">

<div Id="tim1" Style="position:absolutewidth:10height:10top:10left:50"

class="time"></div><div Id="tim2"

Style="position:absolutefilter:flipv() alpha(opacity=20)font-style:italic"

class="time"></div>

</body>

<script Language="JavaScript">

<!-- Hiding

var ctimer

function init(){

if (document.all){

tim2.style.left=tim1.style.posLeft

tim2.style.top=tim1.style.posTop+tim1.offsetHeight-6

settimes()

}

}

function settimes(){

var time= new Date()

hours= time.getHours()

mins= time.getMinutes()

secs= time.getSeconds()

if (hours<10)

hours="0"+hours

if(mins<10)

mins="0"+mins

if (secs<10)

secs="0"+secs

tim1.innerHTML=hours+":"+mins+":"+secs

tim2.innerHTML=hours+":"+mins+":"+secs

ctimer=setTimeout('settimes()',960)

}

// -->

</script>

</html>

多级关联菜单 这个你自己做下小的改动 没有错误的代码

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin

var arrItems1 = new Array()

var arrItemsGrp1 = new Array()

arrItems1[3] = "Truck"

arrItemsGrp1[3] = 1

arrItems1[4] = "Train"

arrItemsGrp1[4] = 1

arrItems1[5] = "Car"

arrItemsGrp1[5] = 1

arrItems1[6] = "Boat"

arrItemsGrp1[6] = 2

arrItems1[7] = "Submarine"

arrItemsGrp1[7] = 2

arrItems1[0] = "Planes"

arrItemsGrp1[0] = 3

arrItems1[1] = "Ultralight"

arrItemsGrp1[1] = 3

arrItems1[2] = "Glider"

arrItemsGrp1[2] = 3

var arrItems2 = new Array()

var arrItemsGrp2 = new Array()

arrItems2[21] = "747"

arrItemsGrp2[21] = 0

arrItems2[22] = "Cessna"

arrItemsGrp2[22] = 0

arrItems2[31] = "Kolb Flyer"

arrItemsGrp2[31] = 1

arrItems2[34] = "Kitfox"

arrItemsGrp2[34] = 1

arrItems2[35] = "Schwietzer Glider"

arrItemsGrp2[35] = 2

arrItems2[99] = "Chevy Malibu"

arrItemsGrp2[99] = 5

arrItems2[100] = "Lincoln LS"

arrItemsGrp2[100] = 5

arrItems2[57] = "BMW Z3"

arrItemsGrp2[57] = 5

arrItems2[101] = "F-150"

arrItemsGrp2[101] = 3

arrItems2[102] = "Tahoe"

arrItemsGrp2[102] = 3

arrItems2[103] = "Freight Train"

arrItemsGrp2[103] = 4

arrItems2[104] = "Passenger Train"

arrItemsGrp2[104] = 4

arrItems2[105] = "Oil Tanker"

arrItemsGrp2[105] = 6

arrItems2[106] = "Fishing Boat"

arrItemsGrp2[106] = 6

arrItems2[200] = "Los Angelas Class"

arrItemsGrp2[200] = 7

arrItems2[201] = "Kilo Class"

arrItemsGrp2[201] = 7

arrItems2[203] = "Seawolf Class"

arrItemsGrp2[203] = 7

function selectChange(control, controlToPopulate, ItemArray, GroupArray)

{

var myEle

var x

// Empty the second drop down box of any choices

for (var q=controlToPopulate.options.lengthq>=0q--) controlToPopulate.options[q]=null

if (control.name == "firstChoice") {

// Empty the third drop down box of any choices

for (var q=myChoices.thirdChoice.options.lengthq>=0q--) myChoices.thirdChoice.options[q] = null

}

// ADD Default Choice - in case there are no values

myEle = document.createElement("option")

myEle.value = 0

myEle.text = "[SELECT]"

controlToPopulate.add(myEle)

for ( x = 0 x <ItemArray.length x++ )

{

if ( GroupArray[x] == control.value )

{

myEle = document.createElement("option")

myEle.value = x

myEle.text = ItemArray[x]

controlToPopulate.add(myEle)

}

}

}

// End -->

</script>

<form name=myChoices>

<table align="center">

<tr>

<td>

<SELECT id=firstChoice name=firstChoice onchange="selectChange(this, myChoices.secondChoice, arrItems1, arrItemsGrp1)">

<option value=0 SELECTED>[SELECT]</option>

<option value=1>Land</option>

<option value=2>Sea</option>

<option value=3>Air</option>

</SELECT>

</TD><TD>

<SELECT id=secondChoice name=secondChoice onchange="selectChange(this, myChoices.thirdChoice, arrItems2, arrItemsGrp2)">

</SELECT>

<SELECT id=thirdChoice name=thirdChoice>

</SELECT>

</TD>

</TR>

</TABLE>

</form>

希望对你有所帮助