Angularjs自定义指令实现三级联动选择地理位置

更新时间：2020-04-22 16:05:01 作者：startmvc

Angularjs自定义指令实现三级联动效果，先上图代码<htmllang="zh-CN"ng-app="myApp"><head><

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>

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