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

我就是我 2022-04-06 10:56 144阅读 0赞

这篇文章主要介绍了Angularjs自定义指令实现三级联动，选择地理位置，以便以后工作需要可以参考。

Angularjs自定义指令实现三级联动效果图：

![e3216766-3f61-3a7c-93dc-bb862aa88c99.png][]  
![0e38ff3c-309f-3e4e-ac44-daf85e6c5513.png][]

<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

文章来源：[http://www.jb51.net/article/105400.htm][http_www.jb51.net_article_105400.htm]

[e3216766-3f61-3a7c-93dc-bb862aa88c99.png]: /images/20220406/ae6871b4fa67446ab5fc7a3ad27c474d.png
[0e38ff3c-309f-3e4e-ac44-daf85e6c5513.png]: /images/20220406/ae996e472df5478fa3ca6ab32cf47f0c.png
[http_www.jb51.net_article_105400.htm]: http://www.jb51.net/article/105400.htm