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，专注于业务逻辑实现，大幅提升开发效率，该方案可轻松扩展为多级联动（如区县选择），适用于各类地址选择场景。