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中获取时间new Date()的全面介绍
Jun 20 Javascript
自己封装的一个原生JS拖动方法(推荐)
Nov 22 Javascript
微信小程序 MD5的方法详解及实例代码
Mar 10 Javascript
详解Vue-基本标签和自定义控件
Mar 24 Javascript
angular.js中解决跨域问题的三种方式
Jul 12 Javascript
详解如何在angular2中获取节点
Nov 23 Javascript
浅谈gulp创建完整的项目流程
Dec 20 Javascript
Nuxt.js之自动路由原理的实现方法
Nov 21 Javascript
详解Vue2 添加对scss的支持
Jan 02 Javascript
JavaScript实现猜数字游戏
May 20 Javascript
关于angular浏览器兼容性问题的解决方案
Jul 26 Javascript
JavaScript十大取整方法实例教程
Dec 03 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中file_get_content 和curl以及fopen 效率分析
2014/09/19 PHP
PHP的Laravel框架中使用AdminLTE模板来编写网站后台界面
2016/03/21 PHP
Laravel 将数据表的数据导出,并生成seeds种子文件的方法
2019/10/09 PHP
Javascript 构造函数,公有,私有特权和静态成员定义方法
2009/11/30 Javascript
简短几句jquery代码的实现一个图片向上滚动切换
2011/09/02 Javascript
Javascript基础 函数“重载” 详细介绍
2013/10/25 Javascript
javascript的switch用法注意事项分析
2015/02/02 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
2015/11/03 Javascript
第一次接触JS require.js模块化工具
2016/04/17 Javascript
关于JavaScript和jQuery的类型判断详解
2016/10/08 Javascript
JS+Ajax实现百度智能搜索框
2017/08/04 Javascript
React从react-router路由上做登陆验证控制的方法
2018/05/10 Javascript
Angular异步变同步处理方法
2018/08/13 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
2018/09/20 Javascript
VeeValidate 的使用场景以及配置详解
2019/01/11 Javascript
webpack4之如何编写loader的方法步骤
2019/06/06 Javascript
Node.js学习之内置模块fs用法示例
2020/01/22 Javascript
[37:37]DAC2018 4.4 淘汰赛 Optic vs Mineski 第二场
2018/04/05 DOTA
python实现简单的计时器功能函数
2015/03/14 Python
如何在Python函数执行前后增加额外的行为
2016/10/20 Python
浅谈pyhton学习中出现的各种问题(新手必看)
2017/05/17 Python
Python实现两个list对应元素相减操作示例
2017/06/09 Python
对Python中Iterator和Iterable的区别详解
2018/10/18 Python
Python模块的加载讲解
2019/01/15 Python
python getopt模块使用实例解析
2019/12/18 Python
如何使用Python破解ZIP或RAR压缩文件密码
2020/01/09 Python
python PIL模块的基本使用
2020/09/29 Python
自荐信的两点禁忌
2013/10/30 职场文书
高中生自我鉴定范文
2013/10/30 职场文书
七一党日活动总结
2014/07/08 职场文书
丽江古城导游词
2015/02/03 职场文书
2015年度保密工作总结
2015/04/24 职场文书
《蓝鲸的眼睛》读后感5篇
2020/01/15 职场文书
JavaScript小技巧带你提升你的代码技能
2021/09/15 Javascript
P站美图推荐——变身女主角特辑
2022/03/20 日漫
Spring Boot 实现 WebSocket
2022/04/30 Java/Android