Angularjs自定义指令实现三级联动选择地理位置

Angularjs自定义指令实现三级联动效果，先上图

代码

html lang=' zh-CN ' ng-app=' myApp ' head meta charset=' utf-8 ' meta http-equiv=' X-UA-Compatible ' content=' IE=edge ' meta name=' viewport ' content=' width=device-width，initial-scale=1 '脚本src=' http : jquery。量滴js /脚本脚本src=' http : angular。js /脚本src=' http : bootstrap . min . js }。选择位置选择{显示： }块；向左浮动：边距-底部： 2px}/样式脚本类型=' text/JavaScript ' var myApp=angular。模块(' myApp '，[])；myApp.controller('Ctrl '，['$scope '，' utilsService '，function($scope，utils service){ $ scope。位置=' '；$scope .$watch('location '，function(新值){ console。日志(新值)控制台。日志(utilsservice。isEmptyObj(new value))})//if(isEmptyObj($ scope)。location)){////error/} }])；myApp.factory('utilsService '，function(){ return { isEmptyObj : function(obj){ var flag=true；for(var i in obj) { if (obj[i]！=' '){ flag=false；打破；} }返回标志；} })myapp。指令(' cust location '，['$http '，函数($ http){ return { restrict : ' A '，scope: { ngModel : '=' }，templateUrl: 'tmpl.html '，link:函数(scope，elem，attrs){ scope。国家=' '；范围。省份=' ';scope . city=scope . detail address=$ http . get(' location . JSON ').成功（函数（数据){范围。国家列表=数据。国家；});范围$watch('detailAddress '，函数(新值){//console。日志(范围。国家。命名范围。省份。命名范围。城市新价值)范围。ng model={ ' country ' : scope。country==null | |范围。国家==' '？': scope.country.name '省份：范围。省份==null ||作用域。省份==' '?范围。车辆。名称、' city' : scope.city || ' '、' detail address ' : new value }；});范围。更改国家=函数(){ if(作用域。country==null){ scope。国家=' '；范围。省份=' ';scope . city=scope . detail address=scope . ngmodel=} else { scope。ngmodel={ ' country ' :范围。国家。'姓名'省份：范围。省份==null ||作用域。省份==' '?':范围。省份。名称，' city' :作用域. city || ' '，' detail address ' :作用域。详细地址}；} }范围。changeProvince=function(){ scope。ngmodel={ ' country ' :范围。国家。'姓名'省份：范围。省份==null ||作用域。省份==' '?范围。省份。名称，' city' :作用域. city || ' '，' detail address ' :作用域。详细地址}；}范围。更改城市=函数(){范围。ngmodel={ ' country ' :范围。国家。'姓名'省份：范围。省份==null ||作用域。省份==' '?':范围。省份。名称，' city' :作用域. city || ' '，' detail address ' :作用域。详细地址}；} } };}]);/script/head body ng-controller=' Ctrl ' div cust-location ng-model=' location '/div/body/html tmpl。超文本标记语言

div class=' select location ' div select class=' BTN BTN-信息BTN-sm ' ng-change=' change country()' ng-model=' country ' ng-options=' C .国家列表中C的名称选项值='国家/option/select/div select class=' BTN BTN-信息BTN-sm ' ng-change=' change public()' ng-model='省份ng-options=' p .国家/地区中p的名称。省份选项值=' '省份/直轄市/option/select/div select class=' BTN BTN-信息BTN-sm ' ng-change=' change city()' ng-model=' city ' ng-options=' c代表省内c .城市'选项值=' '市/option/select/div div style=' width :348 px；'输入类型=' text ' class=' form-control ' ng-model=' detailAddress ' placeholder='详细地址ng-disabled=' country='=' ' | | country==null '/div/div以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。