Angularjs自定义指令实现三级联动 选择地理位置       这篇文章主要介绍了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" 
 script src="jquery.min.js" /script 
 script src="angular.js" /script 
 script src="bootstrap.min.js" /script 
 link rel="stylesheet" href="bootstrap.min.css" rel="external nofollow" 
 style type="text/css" 
 select {
 width : 116px;
 .selectLocation select {
 display: block;
 float: left;
 margin-bottom: 2px;
 /style 
 script type="text/javascript" 
 var myApp = angular.module('myApp', []);
 myApp.controller('Ctrl', ['$scope', 'utilsService', function($scope, utilsService){
 $scope.location = '';
 $scope.$watch('location', function(newValue) {
 console.log(newValue)
 console.log(utilsService.isEmptyObj(newValue))
 // 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;
 break;
 return flag;
 myApp.directive("custLocation", ['$http', function($http) {
 return {
 restrict: 'A',
 scope: {
 ngModel : '='
 ',
 link: function(scope, elem, attrs) {
 scope.country = '';
 scope.province = '';
 scope.city = '';
 scope.detailAddress = '';
 $http.get("location.json").success(function(data) {
 scope.countryList = data.country;
 scope.$watch('detailAddress', function(newValue) {
 // console.log(scope.country.name + scope.province.name + scope.city + newValue)
 scope.ngModel = {
 "country" : scope.country == null || scope.country == '' '' : scope.country.name,
 "province" : scope.province == null || scope.province == '' '' : scope.province.name,
 "city" : scope.city || '',
 "detailAddress" : newValue
 scope.changeCountry = function() {
 if (scope.country == null) {
 scope.country = '';
 scope.province = '';
 scope.city = '';
 scope.detailAddress = '';
 scope.ngModel = '';
 } else {
 scope.ngModel = {
 "country" : scope.country.name,
 "province" : scope.province == null || scope.province == '' '' : scope.province.name,
 "city" : scope.city || '',
 "detailAddress" : scope.detailAddress
 scope.changeProvince = function () {
 scope.ngModel = {
 "country" : scope.country.name,
 "province" : scope.province == null || scope.province == '' '' : scope.province.name,
 "city" : scope.city || '',
 "detailAddress" : scope.detailAddress
 scope.changeCity = function() {
 scope.ngModel = {
 "country" : scope.country.name,
 "province" : scope.province == null || scope.province == '' '' : scope.province.name,
 "city" : scope.city || '',
 "detailAddress" : scope.detailAddress
 }]);
 /script 
 /head 
 body ng-controller="Ctrl" 
 div cust-location ng-model="location" /div 
 /body 
 /html 

<

 div 
 div 
 select ng-change="changeCountry()" ng-model="country" ng-options="C.name for C in countryList" 
 option value="" 国家 /option 
 /select 
 /div 
 div 
 select ng-change="changeProvince()" ng-model="province" ng-options="p.name for p in country.province" 
 option value="" 省份/直轄市 /option 
 /select 
 /div 
 div 
 select ng-change="changeCity()" ng-model="city" ng-options="c for c in province.city" 
 option value="" 市 /option 
 /select 
 /div 
 div 
 input type="text" ng-model="detailAddress" placeholder="详细地址" ng-disabled="country=='' || country==null" / 
 /div 
 /div 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持凡科。