本文实例讲述了AngularJS实现的省市二级联动功能。分享给大家供大家参考,具体如下:
& lt; !DOCTYPE html> & lt; html> & lt;头lang=癳n”比; & lt;元charset=皍tf - 8”比; & lt; title> www.jb51.net省市二级联动& lt;/title> & lt;/head> & lt; style> * { 保证金:0; 填充:0; } .ul { list-style:没有; 显示:inline-block; } 李.selectOption ul { 显示:inline-block; 宽度:50 px; 填充:5 px; } ul李:{徘徊 background - color: # 59 c0f3; 颜色:# fff; 光标:指针; } .container { 显示:inline-block; } 戴斯。莱纳姆:{ 显示:inline-block; } dl dt { 显示:inline-block; } .container { 位置:相对; text-align:左; vertical-align:最高; } .selectBoder { 宽度:150 px; 高度:20 px; 保证金:0汽车; margin-bottom: 5 px; 光标:指针; 边界:1 px固体# 808080; 填充:2 px 5 px; 字体大小:14 px; } .selectBoder:{徘徊 边框颜色:# 59 c0f3; } .selectOption:{之前 宽度:0; 高度:0; 边界底部:50 px固体# ffffff; border-left: 50 px固体透明; 边境:50 px固体透明; } .selectOption { 字体大小:14 px; 位置:绝对的; background - color: # ffffff; z - index: 9999; 边界:1 px固体# eee; 宽度:360 px; 填充:3 px 5 px; 不必:5 px 5 px 10 px # 888888; } .button { 宽度:30 px; 高度:30 px; 显示:inline-block; background - color: # 59 c0f3; text-align:中心; 行高:25 px; 光标:指针; 字体大小:24 px; 颜色:# fff; 保证金:0 5 px; border - radius: 30 px; } .button:{徘徊 background - color: # 12 bb16; } & lt;/style> & lt;身体ng-app=ng-controller“myApp”=癿yControl”比; & lt; div类=澳诹眓g-repeat=毖∠钪醒≡瘛霸? & lt; div类="容器"比; & lt; dl> & lt; dd类=皊electBoder ng-click”=癱hoseP(美元指数)”ng-value=" https://www.yisu.com/zixun/false "在{{option.province}} & lt;/dd> & lt; dt类=" selectOption " ng-if="选项。ifShowProvince " ng-mouseleave=" leaveProvince(选项)”在 & lt; ul> & lt;李ng-repeat=" x省" ng-value=" https://www.yisu.com/zixun/x.value " ng-click=癱hoseProvince (event.target美元,选项)”数据名=" {{x.name}}在{{x.name}} & lt;/li> & lt;/ul> & lt;/dt> & lt;/dl> & lt;/div> & lt; div类="容器"比; & lt; dl> & lt; dd类=皊electBoder ng-click”=癱hoseC(美元指数)”ng-value=" https://www.yisu.com/zixun/false "在{{option.city}} & lt;/dd> & lt; dt类=" selectOption " ng-if="选项。ifShowCity " ng-mouseleave=" leaveCity(选项)”在 & lt; ul> & lt;李ng-repeat=皔选项。城市”ng-value=" https://www.yisu.com/zixun/y.value " ng-click=" choseCity (event.target美元,选项)”数据名={{y.name}}在{{y.name}} & lt;/li> & lt;/ul> & lt;/dt> & lt;/dl> & lt;/div> & lt;跨类="按钮" ng-click=癮ddChose(美元指数)“在+ & lt;/span> & lt;跨类="按钮" ng-click=癲eleteChose(美元指数)”祝辞& lt;/span> & lt;/div> & lt;/div> & lt;/body> & lt;脚本type=" text/javascript " src=" https://www.yisu.com/js/jquery-1.8.3.js "祝辞& lt;/script> & lt;脚本type=" text/javascript " src=" https://www.yisu.com/js/angular.min.js "祝辞& lt;/script> & lt;脚本type=" text/javascript祝辞 应用var=angular.module (“myApp”, []); app.controller (myControl,函数(范围){ 美元的范围。ifShowCity=false; 美元的范围。ifShowProvince=false; 美元的范围。选择=[{指数:“0”,ifShowCity:假的,ifShowProvince:假的,省:“”,城市:“”,城市:"}); 美元的范围。leaveProvince=function(选项){ (每美元scope.options函数(指数项){ 如果(选项==scope.options美元(指数)){ 美元的范围。optionIndex=指数; } }) $ scope.options [$ scope.optionIndex]。ifShowProvince=false; } 美元的范围。leaveCity=function(选项){ (每美元scope.options函数(指数项){ 如果(选项==scope.options美元(指数)){ 美元的范围。optionIndex=指数; } }) $ scope.options [$ scope.optionIndex]。ifShowCity=false; } 美元的范围。choseProvince=函数(目标,选项){ (每美元scope.options函数(指数项){ 如果(选项==scope.options美元(指数)){ 美元的范围。optionIndex=指数; } }) $ scope.options [$ scope.optionIndex]。ifShowProvince=false; $ scope.options [$ scope.optionIndex]。?target.getAttribute(“数据名”); (每美元scope.province函数(指数项){ 如果项目。值=https://www.yisu.com/zixun/=target.getAttribute(“价值”)){ $ scope.options [$ scope.optionIndex]。城市=item.children; } } ) } 美元的范围。choseCity=函数(目标,选项){ (每美元scope.options函数(指数项){ 如果(选项==scope.options美元(指数)){ 美元的范围。optionIndex=指数; } }) $ scope.options [$ scope.optionIndex]。ifShowCity=false; $ scope.options [$ scope.optionIndex]。城市=target.getAttribute(“数据名”); } 函数getPrarms () { 返回scope.options美元; } 美元的范围。子=function () { getPrarms (); } 美元的范围。?[{ 名称:“湖北省”, 价值:“01”, 孩子们:[{ 名称:“武汉”, 价值:“0101” },{ 名称:“黄冈”, 价值:“0102” },{ 名称:“荆州”, 价值:“0103” },{ 名称:“十堰”, 价值:“0104” },{ 名称:“黄石”, 价值:“0105” },{ 名称:“鄂州”, 价值:“0106” },{ 名称:“咸宁市”, 价值:“0107” },{ 名称:“襄阳市”, 价值:“0108” } ] }, { 名称:“广东省”, 价值:“02”, 孩子们:[{ 名称:“广东”, 价值:“0201” },{ 名称:“深圳”, 价值:“0202” },{ 名称:“佛山”, 价值:“0203” },{ 名称:“惠州”, 价值:“0204” },{ 名称:“东莞”, 价值:“0205” }) }, { 名称:“河北省”, 价值:“03”, 孩子们:[{ 名称:“北京”, 价值:“0301” },{ 名称:“邯郸”, 价值:“0302” },{ 名称:“邢台”, 价值:“0303” },{ 名称:“保定”, 价值:“0304” },{ 名称:“秦皇岛”, 价值:“0305” } ]} ] 美元的范围。choseP=function(美元指数){ scope.options美元(美元指数)。null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null nullAngularJS实现的省市二级联动功能示例【可对选项实现增删】