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 相关文章推荐
修改或扩展jQuery原生方法的代码实例
Jan 13 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
May 14 Javascript
javascript中checkbox使用方法实例演示
Nov 19 Javascript
JQuery为元素添加样式的实现方法
Jul 20 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
Jan 04 Javascript
JS ES6多行字符串与连接字符串的表示方法
Apr 26 Javascript
JavaScript实现简单的树形菜单效果
Jun 23 Javascript
VeeValidate在vue项目里表单校验应用案例
May 09 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
Jun 07 Javascript
详解webpack模块加载器兼打包工具
Sep 11 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
Apr 15 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
基于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
实现树状结构的两种方法
2006/10/09 PHP
php数组的概述及分类与声明代码演示
2013/02/26 PHP
Zend Framework教程之Loader以及PluginLoader用法详解
2016/03/09 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
javascript 操作文件 实现方法小结
2009/07/02 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
2014/03/14 Javascript
JavaScript作用域链示例分享
2014/05/27 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
2014/06/23 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
2015/01/23 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
2015/10/01 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
2016/09/06 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
2017/05/02 Javascript
Angular-UI Bootstrap组件实现警报功能
2018/07/16 Javascript
Ajax请求时无法重定向的问题解决代码详解
2019/06/21 Javascript
js实现消灭星星(web简易版)
2020/03/24 Javascript
Python实现批量将word转html并将html内容发布至网站的方法
2015/07/14 Python
Django  ORM 练习题及答案
2019/07/19 Python
python isinstance函数用法详解
2020/02/13 Python
tensorflow模型文件(ckpt)转pb文件的方法(不知道输出节点名)
2020/04/22 Python
Python偏函数Partial function使用方法实例详解
2020/06/17 Python
python七种方法判断字符串是否包含子串
2020/08/18 Python
什么是Python包的循环导入
2020/09/08 Python
python中time包实例详解
2021/02/02 Python
HTML5标签与HTML4标签的区别示例介绍
2013/07/18 HTML / CSS
日本即尚网:JSHOPPERS.com(支持中文)
2019/12/03 全球购物
公司司机岗位职责
2014/02/07 职场文书
工地标语大全
2014/06/18 职场文书
员工培训协议书
2014/09/15 职场文书
房屋买卖协议书范本
2014/09/27 职场文书
公司领导班子对照检查存在问题整改措施
2014/10/02 职场文书
1000字打架检讨书
2014/11/03 职场文书
植物园观后感
2015/06/11 职场文书
运动会800米赞词
2015/07/22 职场文书
导游词之江南周庄
2019/12/06 职场文书
如何理解Vue前后端数据交互与显示
2021/05/10 Vue.js
Python 读取千万级数据自动写入 MySQL 数据库
2022/06/28 Python