AngularJS实现select二级联动下拉菜单如何动态加载选项？

在Web开发中，下拉菜单联动是常见的交互需求，尤其在表单填写、数据筛选等场景中应用广泛，本文将以AngularJS为例，详细介绍如何实现一个功能完善的二级联动下拉菜单，涵盖基础原理、代码实现、优化技巧及常见问题解决方案。

联动下拉菜单的核心逻辑

二级联动下拉菜单的核心在于数据关联性：当用户选择一级菜单中的某一项时，二级菜单需动态加载与该项相关的数据，AngularJS通过双向数据绑定（ng-model）和事件监听（ng-change）机制，能够高效实现这一逻辑,其基本流程可概括为：

1. 初始化一级菜单数据，绑定ng-model；
2. 监听一级菜单的ng-change事件,触发数据加载；
3. 根据一级选项筛选二级数据,更新二级菜单选项；
4. 通过ng-options动态渲染二级菜单。

完整代码实现

以下是一个基于AngularJS的二级联动菜单示例，包含HTML模板、控制器逻辑和样式设计。

HTML模板结构

<div ng-app="selectApp" ng-controller="SelectController">
  <div class="form-group">
    <label>一级分类：</label>
    <select ng-model="selectedCategory" ng-change="loadSubCategories()" class="form-control">
      <option value="">请选择</option>
      <option ng-repeat="category in categories" value="{{category.id}}">
        {{category.name}}
      </option>
    </select>
  </div>
  <div class="form-group">
    <label>二级分类：</label>
    <select ng-model="selectedSubCategory" ng-disabled="!subCategories.length" class="form-control">
      <option value="">请选择</option>
      <option ng-repeat="sub in subCategories" value="{{sub.id}}">
        {{sub.name}}
      </option>
    </select>
  </div>
</div>

AngularJS控制器逻辑

angular.module('selectApp', [])
  .controller('SelectController', ['$scope', function($scope) {
    // 一级分类数据
    $scope.categories = [
      { id: 1, name: '电子产品' },
      { id: 2, name: '服装鞋帽' },
      { id: 3, name: '图书音像' }
    ];
    // 二级分类数据（实际项目中可通过AJAX获取）
    $scope.allSubCategories = {
      1: [{ id: 101, name: '手机' }, { id: 102, name: '电脑' }],
      2: [{ id: 201, name: '男装' }, { id: 202, name: '女装' }],
      3: [{ id: 301, name: '文学' }, { id: 302, name: '科技' }]
    };
    $scope.subCategories = [];
    $scope.selectedCategory = '';
    $scope.selectedSubCategory = '';
    // 加载二级分类
    $scope.loadSubCategories = function() {
      if ($scope.selectedCategory) {
        $scope.subCategories = $scope.allSubCategories[$scope.selectedCategory];
        $scope.selectedSubCategory = ''; // 重置二级选择
      } else {
        $scope.subCategories = [];
      }
    };
  }]);

CSS样式优化

.form-group {
  margin-bottom: 15px;
}
label {
  display: inline-block;
  width: 80px;
  font-weight: bold;
}
select.form-control {
  width: 200px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
select.form-control:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
}

功能扩展与优化

动态加载数据（AJAX）

当数据量较大时，可通过HTTP请求动态获取二级数据，使用$http服务：

$scope.loadSubCategories = function() {
  if ($scope.selectedCategory) {
    $http.get('/api/subcategories?parentId=' + $scope.selectedCategory)
      .then(function(response) {
        $scope.subCategories = response.data;
      });
  }
};

添加默认选项

通过ng-init设置默认值：

<select ng-init="selectedCategory = categories[0].id" ng-model="selectedCategory" ng-change="loadSubCategories()">

三级联动扩展

三级联动的实现逻辑与二级联动类似，只需在二级菜单的ng-change事件中继续触发三级数据加载即可。

常见问题与解决方案

数据加载延迟导致选项空白

问题：AJAX请求未完成时，二级菜单可能显示空选项。
解决：添加加载状态提示：

$scope.isLoading = false;
$scope.loadSubCategories = function() {
  if ($scope.selectedCategory) {
    $scope.isLoading = true;
    $http.get('/api/subcategories?parentId=' + $scope.selectedCategory)
      .then(function(response) {
        $scope.subCategories = response.data;
      })
      .finally(function() {
        $scope.isLoading = false;
      });
  }
};

在HTML中添加加载提示：

<select ng-disabled="isLoading">
  <option value="">加载中...</option>
</select>

内存泄漏风险

问题：频繁切换选项可能导致未清理的请求堆积。
解决：在控制器中取消未完成的请求：

var canceler = $q.defer();
$scope.loadSubCategories = function() {
  if ($scope.selectedCategory) {
    canceler.resolve(); // 取消之前的请求
    canceler = $q.defer();
    $http.get('/api/subcategories', { timeout: canceler.promise })
      .then(function(response) {
        $scope.subCategories = response.data;
      });
  }
};

AngularJS的二级联动下拉菜单通过数据绑定和事件驱动的特性，实现了高效且易维护的交互逻辑，开发者可根据实际需求选择静态数据或动态加载，并通过优化用户体验（如加载状态、默认选项）提升应用质量，对于更复杂的场景（如多级联动、异步数据处理），可结合$q服务或第三方库（如UI-Router）进一步扩展功能，掌握这一基础技能,将为构建复杂的表单系统或数据筛选功能打下坚实基础。