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

更新时间：2017年02月13日 11:05:57 作者：timelessmemoryli

这篇文章主要介绍了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 style="width:348px;">
 <input type="text" class="form-control" ng-model="detailAddress" placeholder="详细地址" ng-disabled="country=='' || country==null" />
 </div>
</div>

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

您可能感兴趣的文章:

Angular.js中定时器循环的3种方法总结
这篇文章主要给大家总结了angular.js中定时器循环的3种方法，分别是利用$interlval实现、$timeout的递归调用来实现以及$timeout借助arguments.callee来实现，每种方法都给出了详细的示例艾玛供大家学习参考，需要的朋友们下面跟着小编一起来学习学习吧。
2017-04-04
详解使用angular框架离线你的应用（pwa指南）
这篇文章主要介绍了详解使用angular框架离线你的应用（pwa指南），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-01-01
浅谈Angular.js中使用$watch监听模型变化
当angular数据模型发生变化时，我们需要如果需要根据他的变化触发其他的事件。本篇文章主要介绍了Angular.js中使用$watch监听模型变化，有兴趣的可以了解一下
2017-01-01
AngularJS实现动态添加Option的方法
这篇文章主要介绍了AngularJS实现动态添加Option的方法,涉及AngularJS事件响应及页面元素动态操作相关实现技巧,需要的朋友可以参考下
2017-05-05
使用xampp将angular项目运行在web服务器的教程
这篇文章主要介绍了使用xampp将angular项目运行在web服务器,本文图文并茂给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-09-09
Angular实现一个简单的多选复选框的弹出框指令实例
下面小编就为大家带来一篇Angular实现一个简单的多选复选框的弹出框指令实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-04-04
详解angular2封装material2对话框组件
本篇文章主要介绍了详解angular2封装material2对话框组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-03-03
AngularJS实现路由实例
本文给大家分享的是使用angularjs路由框架实现的一个简单页面跳转功能，非常的实用，也很详细，有需要的小伙伴可以参考下
2017-02-02
angular.js实现购物车功能
这篇文章主要为大家详细介绍了angular.js购物车功能的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-10-10
Angularjs 制作购物车功能实例代码
这篇文章主要介绍了Angularjs 制作购物车功能实例代码的相关资料,并附示例代码，需要的朋友可以参考下
2016-09-09