AngularJS如何实现省市二级联动？代码示例详解

在Web开发中,省市二级联动是常见的表单交互功能，用户通过选择省份自动加载对应的城市列表，提升用户体验，AngularJS作为经典的前端框架，其数据绑定和模块化特性使此类功能实现更为高效，以下通过示例展示基于AngularJS的省市二级联动实现方法。

功能设计思路

实现省市二级联动需解决三个核心问题：数据存储、数据关联和动态渲染，数据采用JSON格式存储，省级数据包含省份名称和对应的城市数组；通过AngularJS的ng-model绑定选中省份，利用ng-options动态生成城市选项；监听省份选择事件触发城市列表更新。

核心代码实现

模块与控制器定义

var app = angular.module('locationApp', []); app.controller('LocationCtrl', function($scope) { $scope.provinces = [ {name: '北京市', cities: ['东城区', '西城区']}, {name: '上海市', cities: ['黄浦区', '徐汇区']}, {name: '广东省', cities: ['广州市', '深圳市', '珠海市']} ]; $scope.selectedProvince = ''; $scope.selectedCity = ''; });

模板绑定

<div ng-app="locationApp" ng-controller="LocationCtrl"> <select ng-model="selectedProvince" ng-options="p.name for p in provinces"> <option value="">请选择省份</option> </select> <select ng-model="selectedCity" ng-options="c for c in selectedProvince.cities" ng-disabled="!selectedProvince"> <option value="">请选择城市</option> </select> </div>

关键特性解析

数据双向绑定

AngularJS的ng-model实现视图与模型的双向同步，当用户选择省份时，selectedProvince自动更新，触发城市列表重新渲染。

动态选项生成

ng-options指令支持动态生成选项列表。p.name for p in provinces遍历省份数组，selectedProvince.cities则根据当前省份动态获取城市数据。

条件渲染控制

通过ng-disabled指令在未选择省份时禁用城市下拉框，避免无效操作。

功能扩展优化

异步加载数据

实际应用中省市数据通常从服务器获取,可通过$http服务实现异步加载：

app.controller('LocationCtrl', function($scope, $http) { $http.get('/api/provinces').then(function(response) { $scope.provinces = response.data; }); });

数据格式标准化

推荐使用统一的数据接口规范,确保前后端数据结构一致：

| 字段名 | 类型 | 说明 |

|——–|——–|————–|

| id | String | 省份唯一标识 |

| name | String | 省份名称 |

| cities | Array | 城市数组 |

表单验证增强

添加必填验证和错误提示：

<span class="error" ng-show="!selectedProvince">请选择省份</span> <span class="error" ng-show="selectedProvince && !selectedCity">请选择城市</span>

样式与交互优化

通过CSS提升用户体验,建议采用以下样式：

select { padding: 8px; margin: 5px; border-radius: 4px; border: 1px solid #ccc; } select:disabled { background-color: #f5f5f5; cursor: not-allowed; } .error { color: red; font-size: 12px; margin-left: 5px; }

完整功能示例

最终实现效果包含省份选择、城市联动、数据验证和错误提示，代码结构清晰，易于维护，通过AngularJS的特性，开发者无需手动操作DOM，专注于业务逻辑实现，大幅提升开发效率，该方案可轻松扩展为多级联动（如区县选择），适用于各类地址选择场景。