Json 地区文件:http://blog.csdn.net/youshi520000/article/details/70808580

angularjs

angular.module('app')
.controller('inbillofladingCtrl', ['$scope', '$filter', '$location', 'alertify', 'transferService', 'pagerService','inbillofladingService',
function ($scope, $filter, $location, alertify, transferService, pagerService, inbillofladingService) {
$scope.chinaCities = CityAreaList;
//省份切换
$scope.changeProvince = function () {
var province = $scope.searcher.ShipAddressProvince;
if (!angular.equals("", province)) {
$scope.CityList = $scope.chinaCities.find(c => c.name === province).city;
} else {
$scope.CityList = null;
$scope.AreaList = null;
}
}
//城市切换
$scope.changeCity = function () {
var city = $scope.searcher.ShipAddressCity;
if (!angular.equals("", city)) {
$scope.AreaList = $scope.CityList.find(c=>c.name===city).area;
} else {
$scope.AreaList = null;
}
}
}]);

html

 选择省:
<select ng-model="searcher.ShipAddressProvince" ng-change="changeProvince()">
<option value="">请选择</option>
<option ng-repeat="v in chinaCities" value="{{v.name}}">{{v.name}}</option>
</select>
选择市:
<select ng-model="searcher.ShipAddressCity" ng-change="changeCity()">
<option value="">请选择</option>
<option ng-repeat="v in CityList" value="{{v.name}}">{{v.name}}</option>
</select>
选择区:
<select ng-model="searcher.ShipAddressArea">
<option value="">请选择</option>
<option ng-repeat="v in AreaList" value="{{v}}">{{v}}</option>
</select>

Angularjs 省市区级联的更多相关文章

  1. bootstrap中table页面做省市区级联效果(级联库见前面级联编辑)(非select下拉框)

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. js省市区级联选择联动

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Con ...

  3. angularJs实现级联操作

    angular实现级联非常的方便比起传统的jq和js来说,一般我们肯定是从后台获取一个list,然后生成一个下拉框,然后选中一个下拉框,得到id,再得到下一个list. 这些angular都给我做好了 ...

  4. 完全使用ASP.NET实现的省市区级联效果

    本功能特点:下级的显示和数据的加载都是由上一级下拉框的SelectedIndexChanged触发的,在上级下拉框没有选择之前,下级不会出现,用户体验比较好.无刷新方面,采用AJAX技术,在数据选择的 ...

  5. angularjs之级联菜单

    原理: 1.ng-options中val.id as val.name for val in cascading 将id的值赋给 mg-modelone2.在通过ng-change传给函数3.当一级下 ...

  6. java 爬取 国税局 省市区级联关系

    爬取网址 http://www.stats.gov.cn/tjsj/tjbz/tjyqhdmhcxhfdm/2018/index.html 因为数据比较大,存储为一个json,会内存溢出. 所以按照每 ...

  7. Element UI 中国省市区级联数据

    https://www.npmjs.com/package/element-china-area-data

  8. 一些关于angularJS的自己学习和开发过程中遇到的问题及解决办法

    这篇文章也许会不定时更新,主要记录这段时间内自己遇到的angularjs学习开发的一些问题的解决办法.本文以摘抄为主,主要目的还是将自己遇到的困惑在各个地方查到的解决办法的汇总,给自己留个备忘吧. 1 ...

  9. easyui combobox级联(转载)

    一.创建combobox 有如下几种方式可以创建一个combobox 1.使用select标签,并加上class="easyui-combobox",这种方式比较适用于静态的选项. ...

随机推荐

  1. C# - ZIP 压缩流

    C# - ZIP 压缩流 参考资料 https://docs.microsoft.com/en-us/dotnet/api/system.io.compression.ziparchive?view= ...

  2. golang基于当前1.9版本进行源码编译升级到1.10

    一.起因 golang出了最新的1.10版本,而刚出的vgo也是需要基于该最新版本的.为了测试vgo,因此需要将我的v1.9升级到v1.10版本. 安装过golang的同学都知道,golang常用的有 ...

  3. nineoldandroids开源库

    Android3.0 推出AnimationAPI ,使用起来比较方便,但是不能再3.0以下版本中使用.nineoldandroids开源库可以在任意版本上使用,官网地址:http://nineold ...

  4. Greenwich.SR2版本的Spring Cloud Zuul实例

    网关作为对外服务,在微服务架构中是一个很重要的组件,主要体现在动态路由和接入鉴权这两个功能上.现在我们通过Spring Cloud Zuul来实现对之前a-feign-client(参见Greenwi ...

  5. python中简化的验证码功能

    验证码一般用来验证登陆.交易等行为,减少对端为机器操作的概率,python中可以使用random模块,char()内置函数来实现一个简单的验证码功能. import random def veri_c ...

  6. 使用mysqldump备份表数据

    使用mysqldump备份远程表数据到本地 下面的命令是使用mysqldump命令备份远程数据库的一张表的信息,并将信息保存到本地的一个文件的一个示例: mysqldump -h 192.168.1. ...

  7. Asp.net C# 遍历Excel中的表格名称

    Asp.net C# 遍历Excel中的表格名称     string strConn = "Provider=Microsoft.Jet.OLEDB.4.0;" + " ...

  8. dos下通过命令访问url网址

    psexec.exe工具: https://blog.csdn.net/feier7501/article/details/8841756 https://www.cnblogs.com/boltki ...

  9. Spring 分布式事务详解

    在学习分布式事务的过程中会遇到以下关键名词: 相关名词: XA :XA规范的目的是允许多个资源(如数据库,应用服务器,消息队列,等等)在同一事务中访问,这样可以使ACID属性跨越应用程序而保持有效.X ...

  10. 《C语言程序设计》学习笔记(二)

    第八章 函数 函数的基本概念 定义:函数由函数名.参数和函数体组成. 函数定义的一般形式: 类型说明符 函数名(形式参数声明) { [说明与定义部分] 语句: } 说明: 1.类型说明符用来说明函数的 ...