这篇文章主要介绍了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-1.8.3.js"></script> <script src="bootstrap.js"></script> <script src="angular1.2.9.js"></script> <link rel="stylesheet" href="bootstrap.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框架来创建自定义指令,实现三级联动选择地理位置的功能。AngularJS是一种基于JavaScript的开源前端框架,非常适合构建单页应用(SPA),它通过数据绑定和依赖注入等机制...
在“自定义弹窗(三) 弹窗选择三级联动城市”这个主题中,我们将深入探讨如何实现一个能够展示省、市、区三级联动的城市选择弹窗。这种功能常见于需要用户选择精确地址的应用场景,例如快递配送、服务预约等。 ...
在IT行业中,自定义样式三级联动通常指的是在前端开发中实现的一种交互效果,它涉及到用户界面的省市区选择以及年月日选择等多级下拉菜单。这种功能常见于需要用户输入详细地理位置或时间信息的场景,如在线报名、...
这里我们关注的是一个与小程序相关的项目,它实现了自定义的省市区三级联动地址选择。该项目以".7z"压缩包的形式提供,包含了一个针对小程序的解决方案。 首先,我们需要理解小程序是什么。小程序是微信、支付宝等...
这个“Android三级联动省市区选择器自定义View.zip”文件提供了一个自定义的解决方案,帮助开发者轻松集成这种功能。 首先,`MyAreaView.java`是自定义的View类,它实现了省市区选择器的主要逻辑。这个自定义视图...
微信小程序-省市县三级联动,带有自定义地区码(源代码+截图)微信小程序-省市县三级联动,带有自定义地区码(源代码+截图)微信小程序-省市县三级联动,带有自定义地区码(源代码+截图)微信小程序-省市县三级联动,带有...
angularjs 城市三级联动 包含各主要城市: name: '北京', cityList: [{ name: '市辖区', areaList: ['东城区', '西城区', '崇文区', '宣武区', '朝阳区', '丰台区', '石景山区', '海淀区', '门头沟区', '房山区', '...
在Android开发中,三级联动选择器是一种常见的交互组件,尤其在处理地理位置选择或者分类筛选时十分常见。这个组件模拟了淘宝手机客户端收货地址的选择流程,让用户能够通过连续的下拉菜单来选取省、市、区(县)三...
在Android开发中,"三级联动"或"省市联动"通常是指在一个应用中,用户可以选择省份、城市和区县,这三者之间存在着依赖关系。例如,选择了一个省份后,城市列表会更新为该省份下的城市;再选择一个城市,区县列表则...
在Android开发中,有时我们需要实现一个功能,让用户能够选择他们的省份、城市和区县,这就是所谓的“三级联动”。这个功能通常用于地址填写或者定位服务。本文将深入探讨如何在Android中自定义一个省市区三级联动的...
本文将深入探讨如何构建一个三级联动的自定义日期选择控件,模仿iOS的显示效果,以实现更流畅、美观的交互体验。 首先,我们需要理解"三级联动"的概念。在日期选择器中,这通常指的是年、月、日之间的关联选择。当...
在Android开发中,有时我们需要实现一个功能,让用户能够选择国家、省份和城市,这被称为“地区三级联动”。同时,日期选择器也是应用中常见的组件,用于让用户方便地选取日期。本教程将详细介绍如何使用WheelView来...
在Android开发中,有时我们需要实现一个功能,让用户能够选择省份、城市和区县,这就是所谓的“三级联动”。这个过程涉及到用户界面(UI)的设计、数据的处理以及事件的响应。在给定的资源中,“Android 实现省市区...
"input框省市区三级联动选择"是一种常见的用户输入方式,特别是在移动端应用中,它能够优化用户在选择地理位置时的体验。这种设计允许用户通过一个单一的输入框来完成省份、城市和区县的连续选择,减少了操作步骤,...
在网页开发中,"三级联动"是一种常见的交互设计,常用于地区选择、产品分类等场景。这个技术涉及JavaScript、HTML和XML等核心技术。下面将详细解释这个知识点。 首先,"三级联动"指的是三个下拉菜单之间的联动效果...
在本文中,我们将深入探讨如何使用AngularJS实现二级联动选择菜单。AngularJS,作为一个强大的前端JavaScript框架,提供了丰富的功能和工具来构建动态、交互式的Web应用程序。二级联动选择菜单是常见的用户界面元素...
实现三级联动之后,通常需要对用户选择的地址进行验证和处理,以便在表单提交时能够获取正确的省市区信息。这可能涉及到在表单提交事件中再次检查三级联动数据的一致性和完整性,然后将这些信息传递给服务器进行存储...
在本文中,我们将深入探讨如何使用AngularJS实现一个输入框弹出城市地区联动选择的功能,这一功能对于构建响应式Web应用,特别是在处理地理信息时,非常有用。AngularJS是一个强大的前端JavaScript框架,它通过数据...