Angularjs自定义指令之省市区三级联动
2016-10-21 10:28
483 查看
先上图
代码
<!DOCTYPE html>
<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">
<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>
代码
<!DOCTYPE html>
<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">
<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Angularjs自定义指令实现三级联动 选择地理位置
- Angularjs自定义指令之三级联动---地理位置的选择
- angularjs三级省市联动
- Angularjs 学习总结 -- 实现省市的三级联动
- 省市县三级联动
- 用jquery写的json省市县三级联动下拉
- ajax+json+dom+php+mysql省市县三级联动
- ajax省市线三级联动
- android开发——用GridView实现省市县三级联动
- Jquery实现省市二级三级联动Json
- Android之省市区三级联动
- 省市县三级联动
- Android 省市县 三级联动（android-wheel的使用）
- 一秒集成省市区三级联动选择器
- 省市地区三级联动弹出层Jquery特效
- 省市县三级联动用到的表
- 省市区三级联动JS
- 公众号门店开发，实现select表单省市县三级联动2
- 省市区三级联动
- android之省市区三级联动，recyclerview首字母悬浮列表