angularjs实现地址的三级联动

最新推荐文章于 2019-08-18 13:46:34 发布

半旧ad

最新推荐文章于 2019-08-18 13:46:34 发布

阅读量1.3k

点赞数

分类专栏： web前端开发文章标签： JavaScript angularjs web前端开发

本文链接：https://blog.csdn.net/wyq024613/article/details/51425651

版权

这段代码展示了如何使用AngularJS结合Bootstrap实现全国三级城市联动选择功能。通过ng-change、ng-model和ng-options指令，实现了根据省份选择动态加载市、区的数据。示例中包含部分城市的示例数据，如上海、北京、浙江及其下属地区。

摘要由CSDN通过智能技术生成

一段很简单的代码实现的全国三级城市联动选择效果
其中布局部分用了bootstrap，通过angularjs实现，这里在js中添加地址数据，只有部分数据展示基本实现功能，如果需要修改城市名称，到里面找到对应的文字修改，或者添加即可
html

```
<div class="form-group">
   <label class="col-sm-2 control-label">出生地</label>
      <div class="col-sm-3">
         <select class="form-control" ng-change="data.area = false" ng-model="data.province" ng-options="x.id as x.name for x in cities | cityFilter:0"></select>
      </div>
      <div class="col-sm-3">
         <select class="form-control" ng-mo