前言
之前給大家介紹過一篇關于AngularJS中實現無限級聯動菜單的文章，但沒來得及和大家分享使用的示例，下面這篇文章就來給大家分享下幾個使用的demo。
文中包括demo如下：
1. 同步加載子選項demo
2. 異步加載子選項demo
3. 初始值回填demo
4. 倒金字塔依賴demo
注意：在閱讀本文前請先移步上一篇文章：//www.survivalescaperooms.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); });};3. 初始值回填
因為在開發初期這個需求就很明確了，所以使用上不需要做額外的工作，如果有初始值，只需要在controller中為其賦值即可：
// angular使用好習慣，將primitive值放到對象上var form = {};$scope.form = form;form.province = 30;form.city = 301;4. 倒金子塔依賴
依賴聲明是通過由逗號分割的字符串的形式完成的，使用上非常方便。
設想以下的場景：
教務處需要學生對課程進行評價，學生先選擇周幾，再選擇時間，然后再選擇具體的課程下拉框
周幾和時間之間互不依賴，課程下拉框同時依賴于周幾和時間，換言之，一旦周幾和時間中的任意一個改變，課程下拉框就應該更新。
html部分：
注意第三個select的dependents屬性是day,hour，即同時依賴于day和hour
<select multi-level-select source="getDays" name="day" ng-model="form.day" empty="請選擇周幾"></select><select multi-level-select source="getHours" name="hour" ng-model="form.hour" empty="請選擇時間"></select><select multi-level-select source="getCourses" name="course" ng-model="form.course" empty="請選擇課程" dependents="day,hour"></select>
controller部分：
和前面的例子類似，沒有什么特殊的，預處理數據并提供數據源函數即可。
controller('myCtrl', function ($scope) { var form = {}; $scope.form = form; $scope.getDays = function () { var days = '一二三'.split(''); days.forEach(function (item, index) { days[index] = { text: '星期' + item, value: '星期' + item }; }); return days; }; $scope.getHours = function () { return [{ text: '09:00-12:00', value: '1' }, { text: '14:00-17:00', value: '2' }]; }; var courses = { '星期一': { '1': [{ value: '數學', text: '數學' }, { value: '精讀', text: '精讀' }], '2': [{ value: '足球', text: '足球' }] }, '星期二': { '1': [{ value: '聽力', text: '聽力' }], '2': [{ value: '數學', text: '數學' }] }, '星期三': { '1': [{ value: '計算機', text: '計算機' }], '2': [{ value: '游泳', text: '游泳' }, { value: '古漢語', text: '古漢語' }] }, }; $scope.getCourses = function (values) { if (!values.day || !values.hour) { return []; } return courses[values.day][values.hour]; };});總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
新聞熱點
疑難解答
