微客导航 » 文章资讯 » AngularJS实现的省市二级联动功能示例【可对选项实现增删】

AngularJS实现的省市二级联动功能示例【可对选项实现增删】

2023-09-22 13:24:05 189

本文实例讲述了AngularJS实现的省市二级联动功能。分享给大家供大家参考，具体如下：





www.nhooo.com省市二级联动






{{option.province}}


{{x.name}}

+ -

varapp=angular.module('myApp',[]); app.controller('myControl',function($scope){ $scope.ifShowCity=false; $scope.ifShowProvince=false; $scope.options=[{index:"0",ifShowCity:false,ifShowProvince:false,province:"",city:"",cities:""}]; $scope.leaveProvince=function(option){ $.each($scope.options,function(index,item){ if(option==$scope.options[index]){ $scope.optionIndex=index; } }) $scope.options[$scope.optionIndex].ifShowProvince=false; } $scope.leaveCity=function(option){ $.each($scope.options,function(index,item){ if(option==$scope.options[index]){ $scope.optionIndex=index; } }) $scope.options[$scope.optionIndex].ifShowCity=false; } $scope.choseProvince=function(target,option){ $.each($scope.options,function(index,item){ if(option==$scope.options[index]){ $scope.optionIndex=index; } }) $scope.options[$scope.optionIndex].ifShowProvince=false; $scope.options[$scope.optionIndex].province=target.getAttribute("data-name"); $.each($scope.province,function(index,item){ if(item.value==target.getAttribute("value")){ $scope.options[$scope.optionIndex].cities=item.children; } } ) } $scope.choseCity=function(target,option){ $.each($scope.options,function(index,item){ if(option==$scope.options[index]){ $scope.optionIndex=index; } }) $scope.options[$scope.optionIndex].ifShowCity=false; $scope.options[$scope.optionIndex].city=target.getAttribute("data-name"); } functiongetPrarms(){ return$scope.options; } $scope.sub=function(){ getPrarms(); } $scope.province= [{ name:"湖北省", value:"01", children:[{ name:"武汉", value:"0101" },{ name:"黄冈", value:"0102" },{ name:"荆州", value:"0103" },{ name:"十堰", value:"0104" },{ name:"黄石", value:"0105" },{ name:"鄂州", value:"0106" },{ name:"咸宁市", value:"0107" },{ name:"襄阳市", value:"0108" } ] },{ name:"广东省", value:"02", children:[{ name:"广东", value:"0201" },{ name:"深圳", value:"0202" },{ name:"佛山", value:"0203" },{ name:"惠州", value:"0204" },{ name:"东莞", value:"0205" }] },{ name:"河北省", value:"03", children:[{ name:"北京", value:"0301" },{ name:"邯郸", value:"0302" },{ name:"邢台", value:"0303" },{ name:"保定", value:"0304" },{ name:"秦皇岛", value:"0305" } ]} ] $scope.choseP=function($index){ $scope.options[$index].ifShowProvince=!$scope.options[$index].ifShowProvince; $scope.options[$index].ifShowCity=false; } $scope.choseC=function($index){ $scope.options[$index].ifShowCity=!$scope.options[$index].ifShowCity; $scope.options[$index].ifShowProvince=false; } $scope.addChose=function($index){ if($scope.options.length<10){ $scope.options.splice($scope.options.length,0,{//从最后面添加内容 index:$scope.options.length,ifShowCity:false,ifShowProvince:false }); $scope.canDelete=true; }else{ $scope.canAdd=false; } } $scope.deleteChose=function($index){ if($scope.options.length>1){ $scope.options.splice($index,1);//从当前行删除。 } if($index==1){ $scope.canDelete=false; } } });

更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJSMVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

返回顶部
3162201930
czq8825@qq.com

AngularJS实现的省市二级联动功能示例【可对选项实现增删】

热门推荐

随机推荐