Angularjs自定义指令实现三级联动 选择地理位置
程序员文章站
2022-06-24 17:06:51
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 : '='
},
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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。