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

2019-11-19 17:36:43

字体：大中小

来源：转载

供稿：网友

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>

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

上一篇：js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)

下一篇：基于jQuery代码实现圆形菜单展开收缩效果