Angular.JS无限级联动菜单实战demo

"这篇Angular.JS教程主要关注如何实现无限级的联动菜单，通过实际的demo展示同步加载、异步加载、初始值回填和倒金字塔依赖四种情况。作者建议在阅读本文之前先查看上一篇文章以获取基础背景知识。文章首先介绍了同步加载子选项的实现方法，展示了HTML和Controller部分的代码，强调了使用`dependents`属性来实现联动。" 在Angular.JS中，无限级联动菜单的实现是一项常见的需求，尤其在构建多级选择器时。这种菜单允许用户逐级选择，如国家-省份-城市这样的结构。本文通过四个具体的demo来讲解不同情况下的实现策略。 1. **同步加载子选项**： 这种情况下，所有菜单的数据在页面加载时已经准备完毕。在HTML中，我们需要两个`<select>`元素，第一个用于省份，第二个用于城市。城市的选择依赖于省份的选择，因此在第二个`<select>`中设置`dependents="province"`。在控制器中，我们处理数据并创建两个数据源函数`getProvinces`和`getCities`，前者返回省份列表，后者根据选定的省份返回对应的城市列表。`ng-model`用来保存用户的当前选择。 ```html <select multi-level-select source="getProvinces" name="province" ng-model="form.province" empty="请选择省份"></select> <select multi-level-select source="getCities" name="city" ng-model="form.city" empty="请选择城市" dependents="province"></select> ``` ```javascript controller('myCtrl', ['$scope', function($scope) { var form = {}; $scope.form = form; var data = [/* 省份和城市的数据 */]; // 处理数据并创建数据源函数 $scope.getProvinces = function() { /* 返回省份列表 */ }; $scope.getCities = function(provinceId) { /* 根据provinceId返回城市列表 */ }; }]); ``` 2. **异步加载子选项**： 当子菜单的数据需要在用户做出选择后从服务器动态获取时，可以采用异步加载。这里需要使用$http服务或者Promise来获取数据。当父级选择改变时，触发一个异步请求，获取对应的子级数据。 3. **初始值回填**： 在某些场景下，可能需要在页面加载时预先填充一部分选择。这通常涉及到在初始化阶段设置`ng-model`的值，使得对应的菜单项被选中。 4. **倒金字塔依赖**： 在更复杂的情况下，可能存在多个级别的依赖关系，例如城市依赖于省份，省份又依赖于国家。这种情况下，需要设计一个递归的解决方案，以便正确处理各个层级之间的依赖关系。 通过这些示例，开发者能够了解如何在Angular.JS环境中构建灵活且高效的无限级联动菜单，无论是同步还是异步加载数据，都能游刃有余地处理。