Angular.JS实现无限级的联动菜单(使用demo)

前言

之前给大家介绍过一篇关于AngularJS中实现无限级联动菜单的文章，但没来得及和大家分享使用的示例，下面这篇文章就来给大家分享下几个使用的demo。

文中包括demo如下：

1. 同步加载子选项demo

2. 异步加载子选项demo

3. 初始值回填demo

4. 倒金字塔依赖demo

注意：在阅读本文前请先移步上一篇文章：//www.Vevb.com/article/78126.htm

1. 同步加载子选项

在各联动菜单加载之前，我们已经通过某种方式（比如后端渲染、api依赖、deferred依赖等等）拿到了渲染各级菜单所需的各种数据，我们只需要将该数据处理为

[{text: 'some text',value: 'some value'},]

的形式，并封装成数据源函数即可。以省-市联动为例：

html部分：

注意第二个select中声明了dependents="province" ，以此实现联动

<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>

controller部分：

预处理数据，提供数据源函数

controller('myCtrl', ['$scope', function ($scope) {  // angular使用好习惯，将primitive值放到对象上 var form = {}; $scope.form = form;  var data = [{ name: '浙江', id: 10, cities: [{  name: '杭州',  id: 100 }, {  name: '宁波',  id: 101 }, {  name: '温州',  id: 102 }] }, { name: '广东', id: 20, cities: [{  name: '广州',  id: 200 }, {  name: '深圳',  id: 201 }, {  name: '佛山',  id: 202 }] }, { name: '山东', id: 30, cities: [{  name: '济南',  id: 301 }, {  name: '青岛',  id: 302 }, {  name: '烟台',  id: 303 }] }];  var provinces = [];  var citiesLookup = {};  // 预处理，返回[{text: 'some text', value: 'some value'},]的数据格式 $.each(data, function (index, province) { provinces.push({  text: province.name,  value: province.id }); var cities = []; $.each(province.cities, function (index, city) {  cities.push({  text: city.name,  value: city.id  }); }); citiesLookup[province.id] = cities; });  $scope.getProvinces = function () { return provinces; };  $scope.getCities = function (values) { return citiesLookup[values.province] || []; }; }]);

2. 异步加载子选项demo

主要差异是数据源函数应该返回promise实例（AngularJS中使用$q即可）。为了演示方便，这里就不用$http了，除了预处理（由使用者自己的业务逻辑负责）外，完全一样。

和上一个例子非常相似，只需要将两个数据源函数修改为：

$scope.getProvinces = function () { return $q(function (resolve) { // 异步时应返回promise，这里就不用http了，除了预处理（由使用者自己的业务逻辑负责）外，完全一样 // 如果需要缓存，也请在这里自己负责 $timeout(function () {  resolve(provinces); }, 100); });}; $scope.getCities = function (values) { return $q(function (resolve) { $timeout(function () {  resolve(citiesLookup[values.province] || []); }, 100); });};