angular 实现自定义样式下拉菜单

自己闲着没事写了一个自定义的下拉菜单希望和大家交流一下!望能和大神们成为朋友。

下面上代码:

<!doctype html>

<html lang="en" ng-app=‘App‘>

<head>

<meta charset="UTF-8">

<title>Document</title>

<script src=‘../angular-1.3.9/angular.js‘></script>

<style>

*{

list-style:none;

margin: 0;

padding: 0;

-webkit-box-sizing: border-box;

}

.listbox{

width: 200px;

margin: 0 auto;

border: 1px solid #333;

height: auto;

}

.listbox ul{

width: 100%;

height: auto;

border-bottom:1px solid #ccc;

box-shadow: 2px 2px 3px #000;

}

.listbox ul p{

width: 100%;

height: 32px;

line-height: 30px;

color: #333;

border-bottom: 1px solid #333;

text-indent: 10px;

}

.listbox ul li{

width: 100%;

height: 30px;

line-height: 30px;

border-bottom: 1px solid #ccc;

text-indent: 10px;

}

</style>

</head>

<body ng-controller=‘modulecont‘>

<div class=‘listbox‘>

<ul>

<p ng-click=‘toggle($event,$index)‘ data-id=‘{{cityId}}‘>{{title}}</p>

<li ng-repeat=‘i in list‘ ng-show=‘aa‘ ng-click=‘toggle($event,$index)‘>{{i.name}}</li>

</ul>

</div>

<script>

var datasrc = {

"localArea":[{"name":"朝阳","id":1142,"paramname":"localDiduan","option":[{"name":"国贸","id":1195,"pid":1142},{"name":"CBD ","id":6834,"pid":1142},{"name":"大望路","id":5785,"pid":1142},{"name":"四惠","id":5786,"pid":1142},{"name":"双井","id":5779,"pid":1142},{"name":"劲松","id":1199,"pid":1142},{"name":"潘家园","id":5780,"pid":1142},{"name":"广渠门","id":5990,"pid":1142},{"name":"建外大街","id":5988,"pid":1142},{"name":"东大桥","id":6830,"pid":1142},{"name":"工体","id":5826,"pid":1142},{"name":"朝外大街","id":6017,"pid":1142},{"name":"京广桥","id":1202,"pid":1142},{"name":"团结湖","id":7559,"pid":1142},{"name":"朝阳公园","id":5999,"pid":1142},{"name":"呼家楼","id":1207,"pid":1142},{"name":"三里屯","id":1198,"pid":1142},{"name":"麦子店","id":6001,"pid":1142},{"name":"燕莎","id":1200,"pid":1142},{"name":"三元桥","id":1194,"pid":1142},{"name":"国展","id":7560,"pid":1142},{"name":"西坝河","id":7561,"pid":1142},{"name":"柳芳","id":7566,"pid":1142},{"name":"和平街","id":5784,"pid":1142},{"name":"左家庄","id":7564,"pid":1142},{"name":"太阳宫","id":6014,"pid":1142},{"name":"芍药居","id":7550,"pid":1142},{"name":"安贞","id":1204,"pid":1142},{"name":"亚运村","id":1193,"pid":1142},{"name":"安慧桥","id":5992,"pid":1142},{"name":"小关","id":7563,"pid":1142},{"name":"北沙滩","id":7565,"pid":1142},{"name":"奥运村","id":5994,"pid":1142},{"name":"大屯","id":5993,"pid":1142},{"name":"亚运村小营","id":6828,"pid":1142},{"name":"望京","id":1203,"pid":1142},{"name":"来广营","id":6012,"pid":1142},{"name":"媒体村","id":12211,"pid":1142},{"name":"花家地","id":6019,"pid":1142},{"name":"北苑","id":5782,"pid":1142},{"name":"大山子","id":7551,"pid":1142},{"name":"酒仙桥","id":1206,"pid":1142},{"name":"甘露园","id":12179,"pid":1142},{"name":"首都机场","id":6002,"pid":1142},{"name":"东坝","id":6011,"pid":1142},{"name":"姚家园","id":6010,"pid":1142},{"name":"水碓子","id":6021,"pid":1142},{"name":"甜水园","id":6832,"pid":1142},{"name":"朝青板块","id":6833,"pid":1142},{"name":"石佛营","id":6006,"pid":1142},{"name":"十里堡","id":5997,"pid":1142},{"name":"红庙","id":6018,"pid":1142},{"name":"百子湾","id":7558,"pid":1142},{"name":"高碑店","id":6940,"pid":1142},{"name":"定福庄","id":6835,"pid":1142},{"name":"双桥","id":11367,"pid":1142},{"name":"慈云寺","id":12197,"pid":1142},{"name":"常营","id":6009,"pid":1142},{"name":"管庄","id":5781,"pid":1142},{"name":"南磨房","id":6005,"pid":1142},{"name":"垡头","id":5998,"pid":1142},{"name":"豆各庄","id":6004,"pid":1142},{"name":"十八里店","id":6003,"pid":1142},{"name":"小红门","id":6838,"pid":1142},{"name":"十里河","id":12945,"pid":1142},{"name":"惠新西街","id":13695,"pid":1142},{"name":"将台路","id":7562,"pid":1142},{"name":"八里庄","id":14036,"pid":1142},{"name":"欢乐谷","id":14068,"pid":1142},{"name":"惠新里","id":14576,"pid":1142},{"name":"南沙滩","id":18328,"pid":1142},{"name":"农业展览馆","id":18766,"pid":1142},{"name":"胜古","id":16081,"pid":1142},{"name":"朝阳周边","id":1208,"pid":1142},{"name":"健翔桥","id":15334,"pid":1142},{"name":"松榆里","id":15335,"pid":1142},{"name":"孙河","id":15336,"pid":1142},{"name":"华威桥","id":15377,"pid":1142}]},{"name":"海淀","id":1143,"paramname":"localDiduan","option":[{"name":"中关村","id":1196,"pid":1143},{"name":"北京大学","id":1236,"pid":1143},{"name":"清华大学","id":1237,"pid":1143},{"name":"五道口","id":5788,"pid":1143},{"name":"上地","id":1238,"pid":1143},{"name":"西三旗","id":5790,"pid":1143},{"name":"西二旗","id":11365,"pid":1143},{"name":"清河","id":5791,"pid":1143},{"name":"二里庄","id":6817,"pid":1143},{"name":"学院路","id":1241,"pid":1143},{"name":"知春路","id":5789,"pid":1143},{"name":"牡丹园","id":6819,"pid":1143},{"name":"小西天","id":6851,"pid":1143},{"name":"北航","id":7554,"pid":1143},{"name":"北太平庄","id":5792,"pid":1143},{"name":"蓟门桥","id":5985,"pid":1143},{"name":"双榆树","id":5967,"pid":1143},{"name":"人民大学","id":6714,"pid":1143},{"name":"皂君庙","id":7552,"pid":1143},{"name":"大钟寺","id":5981,"pid":1143},{"name":"魏公村","id":1239,"pid":1143},{"name":"交通大学","id":12196,"pid":1143},{"name":"白石桥","id":7556,"pid":1143},{"name":"紫竹桥","id":1243,"pid":1143},{"name":"花园桥","id":5977,"pid":1143},{"name":"北洼路","id":7433,"pid":1143},{"name":"航天桥","id":5975,"pid":1143},{"name":"甘家口","id":1246,"pid":1143},{"name":"军博","id":6822,"pid":1143},{"name":"公主坟","id":1245,"pid":1143},{"name":"厂洼","id":15172,"pid":1143},{"name":"玉泉路","id":15592,"pid":1143},{"name":"万寿路","id":6716,"pid":1143},{"name":"五棵松","id":5979,"pid":1143},{"name":"永定路","id":5970,"pid":1143},{"name":"西八里庄","id":1244,"pid":1143},{"name":"定慧寺","id":7555,"pid":1143},{"name":"田村","id":5969,"pid":1143},{"name":"四季青","id":6717,"pid":1143},{"name":"香山","id":6715,"pid":1143},{"name":"世纪城","id":5982,"pid":1143},{"name":"苏州桥","id":5983,"pid":1143},{"name":"苏州街","id":6818,"pid":1143},{"name":"万泉河","id":5974,"pid":1143},{"name":"增光路","id":12195,"pid":1143},{"name":"万柳","id":7553,"pid":1143},{"name":"西苑","id":6924,"pid":1143},{"name":"马连洼","id":5968,"pid":1143},{"name":"西北旺","id":5787,"pid":1143},{"name":"车道沟","id":14573,"pid":1143},{"name":"西山","id":14574,"pid":1143},{"name":"万寿寺","id":14575,"pid":1143},{"name":"明光桥","id":14756,"pid":1143},{"name":"安宁庄","id":14892,"pid":1143},{"name":"学院路北","id":16082,"pid":1143},{"name":"温泉","id":18168,"pid":1143},{"name":"肖家河","id":15895,"pid":1143},{"name":"五彩城","id":18330,"pid":1143},{"name":"海淀周边","id":1247,"pid":1143},{"name":"金沟河","id":15331,"pid":1143},{"name":"恩济里","id":15332,"pid":1143},{"name":"五路居","id":15333,"pid":1143},{"name":"联想桥","id":15376,"pid":1143}]},{"name":"东城","id":1138,"paramname":"localDiduan","option":[{"name":"东直门","id":1156,"pid":1138},{"name":"东直门外","id":5823,"pid":1138},{"name":"和平里","id":1159,"pid":1138},{"name":"雍和宫","id":5816,"pid":1138},{"name":"安定门","id":5817,"pid":1138},{"name":"交道口","id":5819,"pid":1138},{"name":"东四十条","id":5820,"pid":1138},{"name":"海运仓","id":6847,"pid":1138},{"name":"北新桥","id":5818,"pid":1138},{"name":"朝阳门","id":1158,"pid":1138},{"name":"建国门","id":5821,"pid":1138},{"name":"北京站","id":5822,"pid":1138},{"name":"王府井","id":1160,"pid":1138},{"name":"景山","id":1157,"pid":1138},{"name":"灯市口","id":6849,"pid":1138},{"name":"沙滩 ","id":6848,"pid":1138},{"name":"东单","id":5825,"pid":1138},{"name":"东四","id":5824,"pid":1138},{"name":"东城周边","id":1161,"pid":1138}]},{"name":"西城","id":1139,"paramname":"localDiduan","option":[{"name":"西直门","id":1174,"pid":1139},{"name":"车公庄","id":5804,"pid":1139},{"name":"官园","id":7568,"pid":1139},{"name":"百万庄","id":6852,"pid":1139},{"name":"阜成门","id":5795,"pid":1139},{"name":"西四","id":5797,"pid":1139},{"name":"展览路","id":5796,"pid":1139},{"name":"月坛","id":1172,"pid":1139},{"name":"金融街","id":6040,"pid":1139},{"name":"西单","id":1173,"pid":1139},{"name":"德胜门","id":5801,"pid":1139},{"name":"六铺炕","id":6044,"pid":1139},{"name":"积水潭","id":5805,"pid":1139},{"name":"新街口","id":5798,"pid":1139},{"name":"马甸","id":5803,"pid":1139},{"name":"鼓楼","id":1175,"pid":1139},{"name":"地安门","id":5799,"pid":1139},{"name":"复兴门","id":6041,"pid":1139},{"name":"西便门","id":5794,"pid":1139},{"name":"南礼士路","id":1171,"pid":1139},{"name":"什刹海","id":5800,"pid":1139},{"name":"木樨地","id":6042,"pid":1139},{"name":"三里河","id":6043,"pid":1139},{"name":"真武庙","id":15170,"pid":1139},{"name":"西城周边","id":1177,"pid":1139}]},{"name":"崇文","id":1140,"paramname":"localDiduan","option":[{"name":"崇文门","id":1180,"pid":1140},{"name":"前门","id":1178,"pid":1140},{"name":"新世界","id":6063,"pid":1140},{"name":"广渠门","id":6062,"pid":1140},{"name":"东花市","id":1182,"pid":1140},{"name":"法华寺","id":6853,"pid":1140},{"name":"体育馆路","id":1183,"pid":1140},{"name":"磁器口","id":6064,"pid":1140},{"name":"天坛","id":1179,"pid":1140},{"name":"永定门","id":1184,"pid":1140},{"name":"龙潭湖","id":1181,"pid":1140},{"name":"光明楼","id":6061,"pid":1140},{"name":"崇文周边","id":1185,"pid":1140}]},{"name":"宣武","id":1141,"paramname":"localDiduan","option":[{"name":"广安门外","id":6858,"pid":1141},{"name":"广安门内","id":6857,"pid":1141},{"name":"天宁寺","id":6060,"pid":1141},{"name":"马连道","id":5842,"pid":1141},{"name":"红莲","id":6854,"pid":1141},{"name":"白纸坊","id":5835,"pid":1141},{"name":"南菜园","id":6855,"pid":1141},{"name":"大观园","id":5148,"pid":1141},{"name":"白广路","id":5147,"pid":1141},{"name":"牛街","id":1162,"pid":1141},{"name":"长椿街","id":5839,"pid":1141},{"name":"宣武门","id":5151,"pid":1141},{"name":"椿树街道","id":6856,"pid":1141},{"name":"菜市口","id":5149,"pid":1141},{"name":"陶然亭","id":1163,"pid":1141},{"name":"珠市口","id":5838,"pid":1141},{"name":"虎坊桥","id":5150,"pid":1141},{"name":"天桥","id":5837,"pid":1141},{"name":"大栅栏","id":5841,"pid":1141},{"name":"和平门","id":5836,"pid":1141},{"name":"宣武周边","id":1164,"pid":1141}]},{"name":"丰台","id":1144,"paramname":"localDiduan","option":[{"name":"西客站","id":6024,"pid":1144},{"name":"太平桥","id":5130,"pid":1144},{"name":"六里桥","id":6022,"pid":1144},{"name":"丰台路","id":5128,"pid":1144},{"name":"青塔","id":6035,"pid":1144},{"name":"岳各庄","id":6034,"pid":1144},{"name":"卢沟桥","id":5129,"pid":1144},{"name":"长辛店","id":5131,"pid":1144},{"name":"云岗","id":7567,"pid":1144},{"name":"北大地","id":6030,"pid":1144},{"name":"丰台体育馆","id":6039,"pid":1144},{"name":"丽泽桥","id":6037,"pid":1144},{"name":"科技园区","id":6031,"pid":1144},{"name":"世界公园","id":6861,"pid":1144},{"name":"新宫","id":13579,"pid":1144},{"name":"花乡","id":6038,"pid":1144},{"name":"玉泉营","id":1212,"pid":1144},{"name":"菜户营","id":6028,"pid":1144},{"name":"西罗园","id":5136,"pid":1144},{"name":"右安门","id":5134,"pid":1144},{"name":"草桥","id":6032,"pid":1144},{"name":"洋桥","id":6023,"pid":1144},{"name":"木樨园","id":6025,"pid":1144},{"name":"新发地","id":11380,"pid":1144},{"name":"赵公口","id":6026,"pid":1144},{"name":"嘉园","id":7437,"pid":1144},{"name":"刘家窑","id":6027,"pid":1144},{"name":"蒲黄榆","id":6036,"pid":1144},{"name":"左安门","id":6033,"pid":1144},{"name":"方庄","id":1213,"pid":1144},{"name":"东铁匠营","id":5140,"pid":1144},{"name":"丰益桥","id":15171,"pid":1144},{"name":"看丹桥","id":15548,"pid":1144},{"name":"成寿寺","id":6029,"pid":1144},{"name":"宋家庄","id":6859,"pid":1144},{"name":"大红门","id":5137,"pid":1144},{"name":"七里庄","id":11821,"pid":1144},{"name":"马家堡","id":5135,"pid":1144},{"name":"五里店","id":11820,"pid":1144},{"name":"角门","id":6860,"pid":1144},{"name":"南苑","id":9046,"pid":1144},{"name":"东高地","id":5139,"pid":1144},{"name":"和义","id":11454,"pid":1144},{"name":"莲花池","id":13434,"pid":1144},{"name":"丰台周边","id":5141,"pid":1144},{"name":"总部基地","id":15551,"pid":1144}]},{"name":"通州","id":1147,"paramname":"localDiduan","option":[{"name":"北关","id":5811,"pid":1147},{"name":"北关环岛","id":6899,"pid":1147},{"name":"永顺","id":5145,"pid":1147},{"name":"新华大街","id":2639,"pid":1147},{"name":"通州北苑","id":5142,"pid":1147},{"name":"八里桥","id":6056,"pid":1147},{"name":"果园","id":5808,"pid":1147},{"name":"九棵树","id":5809,"pid":1147},{"name":"梨园","id":5144,"pid":1147},{"name":"土桥","id":5810,"pid":1147},{"name":"临河里","id":6055,"pid":1147},{"name":"中仓","id":6047,"pid":1147},{"name":"西门","id":5806,"pid":1147},{"name":"乔庄","id":6057,"pid":1147},{"name":"东关","id":7569,"pid":1147},{"name":"运河大街","id":7439,"pid":1147},{"name":"玉桥","id":5807,"pid":1147},{"name":"张家湾","id":6049,"pid":1147},{"name":"八通轻轨沿线","id":2638,"pid":1147},{"name":"武夷花园","id":6900,"pid":1147},{"name":"潞城","id":7438,"pid":1147},{"name":"马驹桥","id":6051,"pid":1147},{"name":"漷县","id":12210,"pid":1147},{"name":"次渠","id":14583,"pid":1147},{"name":"永乐店","id":18254,"pid":1147},{"name":"通州周边","id":5146,"pid":1147}]},{"name":"石景山","id":1145,"paramname":"localDiduan","option":[{"name":"八宝山","id":1228,"pid":1145},{"name":"玉泉路","id":6865,"pid":1145},{"name":"鲁谷","id":6065,"pid":1145},{"name":"永乐","id":6069,"pid":1145},{"name":"衙门口","id":6864,"pid":1145},{"name":"八角","id":5843,"pid":1145},{"name":"老山","id":6945,"pid":1145},{"name":"杨庄 ","id":6863,"pid":1145},{"name":"古城","id":1229,"pid":1145},{"name":"苹果园","id":1230,"pid":1145},{"name":"金顶街","id":6066,"pid":1145},{"name":"模式口","id":6862,"pid":1145},{"name":"五里坨","id":6068,"pid":1145},{"name":"西山","id":6944,"pid":1145},{"name":"八大处","id":6070,"pid":1145},{"name":"广宁","id":14577,"pid":1145},{"name":"石景山周边","id":1231,"pid":1145}]},{"name":"房山","id":6808,"paramname":"localDiduan","option":[{"name":"长阳","id":6906,"pid":6808},{"name":"良乡","id":6866,"pid":6808},{"name":"阎村","id":7440,"pid":6808},{"name":"迎风","id":6946,"pid":6808},{"name":"窦店","id":6867,"pid":6808},{"name":"房山城关","id":11373,"pid":6808},{"name":"琉璃河","id":12178,"pid":6808},{"name":"韩村河","id":7441,"pid":6808},{"name":"燕山","id":12177,"pid":6808},{"name":"周口店","id":14757,"pid":6808},{"name":"房山周边","id":6869,"pid":6808}]},{"name":"昌平","id":1150,"paramname":"localDiduan","option":[{"name":"天通苑","id":2641,"pid":1150},{"name":"立水桥","id":5834,"pid":1150},{"name":"东小口","id":6059,"pid":1150},{"name":"霍营","id":5828,"pid":1150},{"name":"小汤山","id":5827,"pid":1150},{"name":"北七家","id":5833,"pid":1150},{"name":"回龙观","id":2640,"pid":1150},{"name":"龙泽","id":6898,"pid":1150},{"name":"城北","id":5829,"pid":1150},{"name":"沙河","id":5153,"pid":1150},{"name":"百善","id":5832,"pid":1150},{"name":"阳坊","id":6058,"pid":1150},{"name":"南口","id":5152,"pid":1150},{"name":"城南","id":5830,"pid":1150},{"name":"昌平县城","id":7425,"pid":1150},{"name":"南邵镇","id":15540,"pid":1150},{"name":"昌平周边","id":5154,"pid":1150}]},{"name":"大兴","id":6809,"paramname":"localDiduan","option":[{"name":"亦庄","id":6872,"pid":6809},{"name":"旧宫 ","id":6871,"pid":6809},{"name":"郁花园","id":7480,"pid":6809},{"name":"同兴园","id":6878,"pid":6809},{"name":"西红门","id":6870,"pid":6809},{"name":"兴华大街","id":6873,"pid":6809},{"name":"清源","id":7431,"pid":6809},{"name":"兴丰大街","id":6874,"pid":6809},{"name":"海子角","id":6877,"pid":6809},{"name":"黄村","id":7570,"pid":6809},{"name":"兴业大街","id":6948,"pid":6809},{"name":"观音寺","id":6876,"pid":6809},{"name":"滨河","id":6875,"pid":6809},{"name":"林校路","id":7426,"pid":6809},{"name":"枣园","id":18329,"pid":6809},{"name":"庞各庄","id":14578,"pid":6809},{"name":"生物医药基地","id":18828,"pid":6809},{"name":"瀛海镇","id":16013,"pid":6809},{"name":"高米店","id":16124,"pid":6809},{"name":"大兴周边","id":6881,"pid":6809}]},{"name":"顺义","id":6810,"paramname":"localDiduan","option":[{"name":"胜利","id":7571,"pid":6810},{"name":"石园","id":6884,"pid":6810},{"name":"天竺","id":6885,"pid":6810},{"name":"新国展","id":6887,"pid":6810},{"name":"机场","id":7572,"pid":6810},{"name":"南彩","id":6888,"pid":6810},{"name":"马坡","id":7432,"pid":6810},{"name":"后沙峪","id":6882,"pid":6810},{"name":"李桥","id":6886,"pid":6810},{"name":"光明 ","id":6883,"pid":6810},{"name":"裕龙","id":12180,"pid":6810},{"name":"建新","id":12181,"pid":6810},{"name":"杨镇","id":11452,"pid":6810},{"name":"顺义城区","id":11353,"pid":6810},{"name":"中央别墅区","id":12182,"pid":6810},{"name":"顺义周边","id":6889,"pid":6810}]},{"name":"密云","id":6811,"paramname":"localDiduan","option":[{"name":"密云城区","id":6913,"pid":6811},{"name":"不老屯","id":6907,"pid":6811},{"name":"溪翁庄","id":6908,"pid":6811},{"name":"密云周边","id":6891,"pid":6811}]},{"name":"怀柔","id":6812,"paramname":"localDiduan","option":[{"name":"雁栖","id":6909,"pid":6812},{"name":"桥梓","id":6912,"pid":6812},{"name":"怀柔城区","id":6910,"pid":6812},{"name":"渤海镇","id":6911,"pid":6812},{"name":"庙城","id":14579,"pid":6812},{"name":"怀柔周边","id":6892,"pid":6812}]},{"name":"延庆","id":6813,"paramname":"localDiduan","option":[{"name":"延庆城区","id":6914,"pid":6813},{"name":"大榆树","id":6915,"pid":6813},{"name":"八达岭","id":7443,"pid":6813},{"name":"康庄","id":18255,"pid":6813},{"name":"延庆周边","id":6893,"pid":6813}]},{"name":"平谷","id":6814,"paramname":"localDiduan","option":[{"name":"金海湖","id":6916,"pid":6814},{"name":"滨河路","id":7445,"pid":6814},{"name":"平谷城区","id":6917,"pid":6814},{"name":"兴谷","id":14581,"pid":6814},{"name":"渔阳","id":14582,"pid":6814},{"name":"王辛庄","id":14580,"pid":6814},{"name":"平谷周边","id":6894,"pid":6814}]},{"name":"门头沟","id":6815,"paramname":"localDiduan","option":[{"name":"大峪","id":6895,"pid":6815},{"name":"东辛房","id":6918,"pid":6815},{"name":"龙泉","id":7444,"pid":6815},{"name":"城子街道 ","id":6896,"pid":6815},{"name":"永定","id":6919,"pid":6815},{"name":"潭柘寺","id":6922,"pid":6815},{"name":"军庄","id":6920,"pid":6815},{"name":"门头沟周边","id":6897,"pid":6815}]},{"name":"燕郊","id":11362,"paramname":"localDiduan","option":[{"name":"大厂","id":18371,"pid":11362},{"name":"潮白河","id":18370,"pid":11362},{"name":"东市区","id":18368,"pid":11362},{"name":"迎宾路","id":18367,"pid":11362},{"name":"城区","id":18369,"pid":11362},{"name":"燕顺路","id":18366,"pid":11362}]},{"name":"北京周边","id":1146,"paramname":"localDiduan","option":[{"name":"香河","id":11363,"pid":1146},{"name":"涿州","id":15759,"pid":1146},{"name":"三河","id":11364,"pid":1146},{"name":"永清","id":18765,"pid":1146},{"name":"固安","id":15008,"pid":1146}]}]

}

var App=angular.module(‘App‘,[])

App.controller(‘modulecont‘,function($scope){

$scope.list=datasrc.localArea;

$scope.title=‘请选择‘;

$scope.cityId=‘0‘;

$scope.aa = false;

$scope.toggle = function toggle(e,index) {

e.preventDefault();

if(index!==undefined){

$scope.title=datasrc.localArea[index].name;

$scope.cityId=datasrc.localArea[index].id;

}

$scope.aa = !$scope.aa;

}

})

</script>

</body>

</html>

由于数据是从真实项目中拿来的有点多,大家可以复制代码看看效果吧!欢迎大家相互交流!

时间: 2024-10-14 00:41:24

angular 实现自定义样式下拉菜单的相关文章

[k]自定义样式下拉菜单

自定义样式下拉菜单-1 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title> 自定义样式下拉菜单1 </title> 6 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> 7 <s

CSS 实现样式下拉菜单

下拉菜单的实现 脚本: 1 <script type="text/javascript"> 2 function ShowSub(li) { 3 var subMenu = li.getElementsByTagName("ul")[0]; ; 4 subMenu.style.display = "block"; 5 } 6 function HideSub(li) { 7 var subMenu = li.getElementsBy

jQuery和CSS3超酷二级下拉菜单插件

这是一款效果很酷又简单实用的jQuery二级下拉菜单特效,该特效在点击触发按钮后,二级下拉菜单会向下滑动覆盖原来的主菜单,关闭后二级下拉菜单又向上滑动回去,二级菜单不占用多余的空间. 这个菜单插件是替代标准的二级下拉菜单的好方法,特别是在你想显示更多的二级子菜单的时候.另外,你可以十分容易的自定义二级下拉菜单的样式,多添加一个搜索框或登录注册表单等等. 在线演示:http://www.htmleaf.com/Demo/201502271428.html 下载地址:http://www.htmle

iOS 下拉菜单 FFDropDownMenu自定义下拉菜单样式实战-b

Demo地址:https://github.com/chenfanfang/CollectionsOfExampleFFDropDownMenu框架地址:https://github.com/chenfanfang/FFDropDownMenu 老样子,先附上两张效果图 customMenuStyle.gif customMenuStyle.png 首先自定义一个继承于FFDropDownMenuBasedModel的菜单模型.h文件 #import <FFDropDownMenuBasedMo

IOS第二天-新浪微博 - 添加搜索框,弹出下拉菜单 ,代理的使用 ,HWTabBar.h(自定义TabBar)

********HWDiscoverViewController.m(发现) - (void)viewDidLoad { [super viewDidLoad]; // 创建搜索框对象 HWSearchBar *searchBar = [HWSearchBar searchBar]; searchBar.width = 300; searchBar.height = 30; self.navigationItem.titleView = searchBar; //设置titleView 是搜索框

黄聪:TinyMCE 4 增强 添加样式、按钮、字体、下拉菜单和弹出式窗口

我最喜欢 WordPress 3.9 的更新是使用了 TinyMCE 4.0 编辑器.新的 TinyMCE 看起来看起来更整洁(真正匹配WP仪表板),它有一些非常不错的附加功能.我的很多老主题和插件必须更新为新 TinyMCE 的工作,所以我花了一些时间研究 API 并找出一些很酷的东西.下面我给你介绍下如何可以拓展 TinyMCE 功能的例子.我不会指导您完成所有步骤,或者是什么的代码意味着(这是为开发者),但会为您提供您的主题或插件可用的代码,你可以复制完全相同的代码,粘贴,然后相应地调整.

JS自定义下拉菜单select

由于系统自定的select样式的确丑到爆,所以抽空写了这么一个可以自定义下拉菜单样式的插件, 思路就是隐藏select,用一个span标签显示内容,ul标签显示下拉列表,如图: IE下存在一个BUG,设置overflow-y后,IE下设置width无效,只测试了IE9,其他版本未测试,当然如果能加入自定义样式的滚动条就完美了,时间关系以后再补吧 代码如下: 1 //自定义dropdownlist的样式, 2 //classname为模拟出来的span标签样式 3 //ulClass为下拉列表样式

分别用自定义PopupWindow和自定义Dialog实现下拉菜单

首先看下分别使用PopupWindow和Dialog实现的下拉菜单的不同之处: PopupWindow: Dialog: 由于之前用PopupWindow实现的效果不是太理想,并且弹出下拉菜单的时候背景透明度变化的也不是太好,后来改为Diaolog,项目中其他弹窗也都用的diaolog,便于更改背景透明度,整体看起来也比较统一. 下面把两种实现的方法都记录下来: **第一种:自定义PopupWindow** 首先自定义一个PopWindow: PopWindow.class: public cl

jQuery/CSS3大屏下拉菜单 自定义子菜单内容

这是一款样式很酷的jQuery/CSS3下拉菜单,首先这款CSS3菜单是宽屏的,主要是下拉菜单非常大气,更重要的是,下拉菜单的内容可以自己定义,也就是说,下拉菜单中可以定义菜单.图片等HTML元素,是一款非常实用的jQuery/CSS3下拉菜单插件. 在线预览   源码下载