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


Posted in Javascript onFebruary 13, 2017

Angularjs自定义指令实现三级联动效果,先上图

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

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js类中的公有变量和私有变量
Jul 24 Javascript
jQuery 选择器项目实例分析及实现代码
Dec 28 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
Nov 22 Javascript
js加载读取内容及显示与隐藏div示例
Feb 13 Javascript
IE8中使用javascript动态加载CSS的解决方法
Jun 17 Javascript
js实现单击图片放大图片的方法
Feb 17 Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
May 17 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
JS设计模式之策略模式概念与用法分析
Feb 05 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
Feb 26 Javascript
利用js实现前后台传送Json的示例代码
Mar 29 Javascript
浅谈JS的原型和继承
May 08 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
Feb 13 #Javascript
JS中setTimeout和setInterval的最大延时值详解
Feb 13 #Javascript
Vue.js实现简单动态数据处理
Feb 13 #Javascript
JavaScript获取select中text值的方法
Feb 13 #Javascript
详谈$.data()的用法和作用
Feb 13 #Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
Feb 13 #Javascript
JavaScript实现公历转农历功能示例
Feb 13 #Javascript
You might like
php下判断数组中是否存在相同的值array_unique
2008/03/25 PHP
php递归获取目录内文件(包含子目录)封装类分享
2013/12/25 PHP
CentOS7编译安装php7.1的教程详解
2019/04/18 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
2009/10/20 Javascript
JavaScript代码复用模式实例分析
2012/12/02 Javascript
js分页工具实例
2015/01/28 Javascript
EasyUI Tree树组件无限循环的解决方法
2017/09/27 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
2017/10/25 Javascript
jquery实现楼层滚动效果
2018/01/01 jQuery
详解Webpack+Babel+React开发环境的搭建的方法步骤
2018/01/09 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
2018/03/03 Javascript
vue加载完成后的回调函数方法
2018/09/07 Javascript
nodejs实现用户登录路由功能
2019/05/22 NodeJs
解决VUE-Router 同一页面第二次进入不刷新的问题
2020/07/22 Javascript
python实现一次创建多级目录的方法
2015/05/15 Python
Python中的localtime()方法使用详解
2015/05/22 Python
在Django中编写模版节点及注册标签的方法
2015/07/20 Python
Python按行读取文件的简单实现方法
2016/06/22 Python
定制FileField中的上传文件名称实例
2017/08/23 Python
Python实现base64编码的图片保存到本地功能示例
2018/06/22 Python
如何使用Python进行OCR识别图片中的文字
2019/04/01 Python
python绘制直方图和密度图的实例
2019/07/08 Python
python 在右键菜单中加入复制目标文件的有效存放路径(单斜杠或者双反斜杠)
2020/04/08 Python
如何利用Python动态模拟太阳系运转
2020/09/04 Python
使用CSS3制作一个简单的进度条(demo)
2017/05/23 HTML / CSS
考博自荐信
2013/10/25 职场文书
大学生实习鉴定评语
2014/04/25 职场文书
司法建议书范文
2014/05/13 职场文书
社区党员志愿服务活动方案
2014/08/18 职场文书
学校运动会报道稿
2014/09/23 职场文书
收入证明怎么写
2015/06/12 职场文书
2016年小学“公民道德宣传日”活动总结
2016/04/01 职场文书
Nginx域名转发使用场景代码实例
2021/03/31 Servers
浅谈golang package中init方法的多处定义及运行顺序问题
2021/05/06 Golang
mysql中between的边界,范围说明
2021/06/08 MySQL