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-1.8.3.js"></script>
<script src="bootstrap.js"></script>
<script src="angular1.2.9.js"></script>
<link rel="stylesheet" href="bootstrap.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 : '='
},
templateUrl: 'tmpl.html',
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>tmpl.html
<div class="selectLocation"> <div> <select class="btn btn-info btn-sm" ng-change="changeCountry()" ng-model="country" ng-options="C.name for C in countryList"> <option value="">国家</option> </select> </div> <div> <select class="btn btn-info btn-sm" ng-change="changeProvince()" ng-model="province" ng-options="p.name for p in country.province"> <option value="">省份/直轄市</option> </select> </div> <div> <select class="btn btn-info btn-sm" ng-change="changeCity()" ng-model="city" ng-options="c for c in province.city"> <option value="">市</option> </select> </div> <div style="width:348px;"> <input type="text" class="form-control" ng-model="detailAddress" placeholder="详细地址" ng-disabled="country=='' || country==null" /> </div> </div>