溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
之前給大家介紹過一篇關于AngularJS中實現無限級聯動菜單的文章，但沒來得及和大家分享使用的示例，下面這篇文章就來給大家分享下幾個使用的demo。
文中包括demo如下：
1. 同步加載子選項demo
2. 異步加載子選項demo
3. 初始值回填demo
4. 倒金字塔依賴demo
注意：在閱讀本文前請先移步上一篇文章：https://www.jb51.net/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];
};
});
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
