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实现运动logo图片效果及运动元素对象sportBox使用方法
Dec 25 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
Apr 22 Javascript
js window.onload 加载多个函数和追加函数详解
Jan 08 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
Jun 23 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
Sep 18 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
Dec 04 Javascript
实现高性能JavaScript之执行与加载
Jan 30 Javascript
如何制作幻灯片(代码分享)
Jan 06 Javascript
Vue.js组件高级特性实例详解
Dec 24 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
Dec 24 Javascript
jquery的$().each和$.each的区别
Jan 18 jQuery
区分vue-router的hash和history模式
Oct 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
声音就能俘获人心,蕾姆,是哪个漂亮小姐姐配音呢?
2020/03/03 日漫
详解php的socket通信
2015/08/11 PHP
smarty模板数学运算示例
2016/12/11 PHP
PHP队列场景以及实现代码实例详解
2021/02/26 PHP
用JavaScript实现单继承和多继承的简单方法
2009/03/29 Javascript
JQuery 学习笔记 选择器之三
2009/07/23 Javascript
js如何获取file控件的完整路径具体实现代码
2013/05/15 Javascript
artdialog的图片/标题以及关闭按钮不显示的解决方法
2013/06/27 Javascript
使用js写的一个简易的投票
2013/11/27 Javascript
JavaScript实现Java中StringBuffer的方法
2015/02/09 Javascript
JS实现仿QQ聊天窗口抖动特效
2015/05/10 Javascript
在Javascript中处理数组之toSource()方法的使用
2015/06/09 Javascript
使用Browserify配合jQuery进行编程的超级指南
2015/07/28 Javascript
JavaScript:Date类型全面解析
2016/05/19 Javascript
AngularJS基础 ng-selected 指令简单示例
2016/08/03 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
2016/12/25 Javascript
React利用插件和不用插件实现双向绑定的方法详解
2017/07/03 Javascript
Vue的百度地图插件尝试使用
2017/09/06 Javascript
vue中动态设置meta标签和title标签的方法
2018/07/11 Javascript
你不可不知的Vue.js列表渲染详解
2019/10/01 Javascript
vue2.x 对象劫持的原理实现
2020/04/19 Javascript
vue中移动端调取本地的复制的文本方式
2020/07/18 Javascript
antd table按表格里的日期去排序操作
2020/11/17 Javascript
[22:20]初生之犊-TI4第5名LGD战队纪录片
2014/08/13 DOTA
pyqt5 禁止窗口最大化和禁止窗口拉伸的方法
2019/06/18 Python
浅谈PyQt5中异步刷新UI和Python多线程总结
2019/12/13 Python
django框架单表操作之增删改实例分析
2019/12/16 Python
Python函数生成器原理及使用详解
2020/03/12 Python
python脚本监控logstash进程并邮件告警实例
2020/04/28 Python
sublime3之内网安装python插件Anaconda的流程
2020/11/10 Python
使用postMessage让 iframe自适应高度的方法示例
2019/10/08 HTML / CSS
C#的几个面试问题
2016/05/22 面试题
2014年煤矿工作总结
2014/11/24 职场文书
2014年小学体育工作总结
2014/12/11 职场文书
无房证明样本
2015/06/17 职场文书
Django分页器的用法你都了解吗
2021/05/26 Python