溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關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 > <input type="text" class="form-control" ng-model="detailAddress" placeholder="詳細地址" ng-disabled="country=='' || country==null" /> </div> </div>
關于“Angularjs自定義指令如何實現三級聯動選擇地理位置”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
