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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
AngularJS实现的select二级联动下拉菜单功能示例
本文实例讲述了AngularJS实现的select二级联动下拉菜单功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html ng-app> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <script src="../script/angular.js"
-
Angularjs实现下拉框联动的示例代码
第一种联动方式,在网上看到的,感觉对于我的使用性不高,比较后端不会提供这种json... 实现截图 html <select ng-model="s1" ng-options="selectData.name for selectData in selectDatas"> <option value="">--产品类目--</option> </select> <select ng-model
-
基于angular实现三级联动的生日插件
写了一个生日联动插件具体的效果是这样的: 具体的数据 我取得数据是今年的数据,如果是想要做三级联动的日期插件,改一下时间就好了 var app=angular.module("dataPicker",[]) app.factory('dataPicker', ['$http', '$q', function ($http, $q) { return { query: function () { var lengthYear=100; var dataPicker={ month:[],
-
实例详解AngularJS实现无限级联动菜单
多级联动菜单是常见的前端组件,比如省份-城市联动.高校-学院-专业联动等等.场景虽然常见,但仔细分析起来要实现一个通用的无限分级联动菜单却不一定像想象的那么简单.比如,我们需要考虑子菜单的加载是同步的还是异步的?对于初始值的回填发生在前端还是后端?如果异步加载,是否对于后端API的返回格式有严格的定义?是否容易实现同步.异步共存?是否可以灵活的支持各类依赖关系?菜单中是否有空值选项?--一系列的问题都需要精心处理. 带着这些需求搜索了一圈,不太出乎意料,并没有能在AngularJS的生态中找到一
-
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
本文实例讲述了AngularJS实现的省市二级联动功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net 省市二级联动</title> </head> <style> *{ margin:0; padding:0; } .u
-
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作. AngularJs 就是一个函数库,算不上一个框架,源码2万2千多行,提供了前端MVC的开发方式,有双向绑定,指令等特性,这是具有革命性的.我是多么反感jQuery 用选择器 选择元素 ,绑定事件,进行一大堆DOM操作,一旦代码过多,非常不好维护,html结构改变,又要重写js代码,不过 jQuery 对 ajax的
-
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&quo
-
layui自定义插件citySelect实现省市区三级联动选择
本文实例为大家分享了layui实现省市区三级联动选择的具体代码,供大家参考,具体内容如下 省市区三级菜单联动插件 /** * @ name : citySelect 省市区三级选择模块 * @ Author: aggerChen * @ version: 1.0 */ layui.define(['layer','form','element','laytpl'], function(exports){ var $ = layui.$; var form = layui.form; var la
-
Angularjs自定义指令实现分页插件(DEMO)
由于最近的一个项目使用的是angularjs1.0的版本,涉及到分页查询数据的功能,后来自己就用自定义指令实现了该功能.现在单独做了个简易的小demo,主要是为了分享自己写的分页功能.注:本实例调用的是真实接口数据. 首先.小demo的目录结构如下: 一.代码部分 下面直接把每一个文件的代码贴出来,重点是ListCtrl.js和pageDirective.js: 1.index.html <!DOCTYPE html> <html lang="en" ng-app=&
-
AngularJS 自定义指令详解及实例代码
AngularJS支持用户自定义标签属性,在不需要使用DOM节点操作的情况下,添加自定义的内容. 前面提到AngularJS的四大特性: 1 MVC 2 模块化 3 指令 4 双向数据绑定 下面将会介绍如下的内容: 1 如何自定义指令 2 自定义指令的使用 3 自定义指令的内嵌使用 如何自定义指令: Angular是基于模块的框架,因此上来肯定要创建一个自己的模块: var myAppModule = angular.module("myApp",[]); 然后在此模块基础上创建指令d
-
AngularJS自定义指令之复制指令实现方法
本文实例讲述了AngularJS自定义指令之复制指令实现方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="bootstrap.min.c
-
AngularJS自定义指令实现面包屑功能完整实例
本文实例讲述了AngularJS自定义指令实现面包屑功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="zh-CN" ng-app="myApp"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"
-
Angularjs自定义指令Directive详解
今天学习angularjs自定义指令Directive. Directive是一个非常棒的功能.可以实现我们自义的的功能方法. 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Admin". 在网页上放一个文本框和一个铵钮: <form id="form1" name="form1" ng-app="app" ng-controller="ctrl" novalidate> <i
-
详解angularJS自定义指令间的相互交互
AngularJS 自定义指令 transclude:当元素标签需要嵌套时使用,与ng-transclude配合使用.默认值为false不能使用嵌套,true为可以使用嵌套.在哪个标签上使用ng-transclude就在哪个标签内进行嵌套. 代码示例:(将hello.hi标签进行替换同时span标签嵌套div内) <script type="text/javascript"> var m = angular.module('myApp',[]); m.directive('
-
Android中使用开源框架Citypickerview实现省市区三级联动选择
1．概述 记得之前做商城项目,需要在地址选择中实现省市区三级联动,方便用户快速的填写地址,当时使用的是一个叫做android-wheel 的开源控件,当时感觉非常好用,唯一麻烦的是需要自己整理并解析省市区的xml文件,思路很简单,但是代码量相对大了些.偶然期间发现了另外一个开源组件,也就是今天要介绍的citypickerview. github地址:crazyandcoder/citypicker 2. 实现效果 下面给大家演示下实现效果: 3. 实现方法 (1)添加依赖 dependenc
-
AngularJS 自定义指令详解及实例代码
AngularJS支持用户自定义标签属性,在不需要使用DOM节点操作的情况下,添加自定义的内容. 前面提到AngularJS的四大特性: 1 MVC 2 模块化 3 指令 4 双向数据绑定 下面将会介绍如下的内容: 1 如何自定义指令 2 自定义指令的使用 3 自定义指令的内嵌使用 如何自定义指令: Angular是基于模块的框架,因此上来肯定要创建一个自己的模块: var myAppModule = angular.module("myApp",[]); 然后在此模块基础上创建指令d