快捷導(dǎo)航

Angular.JS實(shí)現(xiàn)無限級的聯(lián)動(dòng)菜單(使用demo)

更新時(shí)間：2017年02月08日 10:37:25 作者：ralph_zhu

這篇文章主要介紹了Angular.JS中實(shí)現(xiàn)無限級聯(lián)動(dòng)菜單的使用示例，本文是在之前的一篇文章的基礎(chǔ)上進(jìn)行的幾個(gè)demo分享，有需要的朋友可以參考借鑒，下面來一起看看吧。

前言

之前給大家介紹過一篇關(guān)于AngularJS中實(shí)現(xiàn)無限級聯(lián)動(dòng)菜單的文章，但沒來得及和大家分享使用的示例，下面這篇文章就來給大家分享下幾個(gè)使用的demo。

文中包括demo如下：

1. 同步加載子選項(xiàng)demo

2. 異步加載子選項(xiàng)demo

3. 初始值回填demo

4. 倒金字塔依賴demo

注意：在閱讀本文前請先移步上一篇文章：http://www.fzitv.net/article/78126.htm

1. 同步加載子選項(xiàng)

在各聯(lián)動(dòng)菜單加載之前，我們已經(jīng)通過某種方式（比如后端渲染、api依賴、deferred依賴等等）拿到了渲染各級菜單所需的各種數(shù)據(jù)，我們只需要將該數(shù)據(jù)處理為

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

的形式，并封裝成數(shù)據(jù)源函數(shù)即可。以省-市聯(lián)動(dòng)為例：

html部分：

注意第二個(gè)select中聲明了dependents="province" ，以此實(shí)現(xiàn)聯(lián)動(dòng)

<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部分：

預(yù)處理數(shù)據(jù)，提供數(shù)據(jù)源函數(shù)

controller('myCtrl', ['$scope', function ($scope) {
 
 // angular使用好習(xí)慣，將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: '濟(jì)南',
  id: 301
 }, {
  name: '青島',
  id: 302
 }, {
  name: '煙臺(tái)',
  id: 303
 }]
 }];
 
 var provinces = [];
 
 var citiesLookup = {};
 
 // 預(yù)處理，返回[{text: 'some text', value: 'some value'},]的數(shù)據(jù)格式
 $.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. 異步加載子選項(xiàng)demo

主要差異是數(shù)據(jù)源函數(shù)應(yīng)該返回promise實(shí)例（AngularJS中使用$q即可）。為了演示方便，這里就不用$http了，除了預(yù)處理（由使用者自己的業(yè)務(wù)邏輯負(fù)責(zé)）外，完全一樣。

和上一個(gè)例子非常相似，只需要將兩個(gè)數(shù)據(jù)源函數(shù)修改為：

$scope.getProvinces = function () {
 return $q(function (resolve) {
 // 異步時(shí)應(yīng)返回promise，這里就不用http了，除了預(yù)處理（由使用者自己的業(yè)務(wù)邏輯負(fù)責(zé)）外，完全一樣
 // 如果需要緩存，也請?jiān)谶@里自己負(fù)責(zé)
 $timeout(function () {
  resolve(provinces);
 }, 100);
 });
};
 
$scope.getCities = function (values) {
 return $q(function (resolve) {
 $timeout(function () {
  resolve(citiesLookup[values.province] || []);
 }, 100);
 });
};

3. 初始值回填

因?yàn)樵陂_發(fā)初期這個(gè)需求就很明確了，所以使用上不需要做額外的工作，如果有初始值，只需要在controller中為其賦值即可：

// angular使用好習(xí)慣，將primitive值放到對象上
var form = {};
$scope.form = form;
form.province = 30;
form.city = 301;

4. 倒金子塔依賴

依賴聲明是通過由逗號分割的字符串的形式完成的，使用上非常方便。

設(shè)想以下的場景：

教務(wù)處需要學(xué)生對課程進(jìn)行評價(jià)，學(xué)生先選擇周幾，再選擇時(shí)間，然后再選擇具體的課程下拉框

周幾和時(shí)間之間互不依賴，課程下拉框同時(shí)依賴于周幾和時(shí)間，換言之，一旦周幾和時(shí)間中的任意一個(gè)改變，課程下拉框就應(yīng)該更新。

html部分：

注意第三個(gè)select的dependents屬性是day,hour，即同時(shí)依賴于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="請選擇時(shí)間"></select>
<select multi-level-select source="getCourses" name="course" ng-model="form.course" empty="請選擇課程" dependents="day,hour"></select>

controller部分：

和前面的例子類似，沒有什么特殊的，預(yù)處理數(shù)據(jù)并提供數(shù)據(jù)源函數(shù)即可。

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: '數(shù)學(xué)',
  text: '數(shù)學(xué)'
  }, {
  value: '精讀',
  text: '精讀'
  }],
  '2': [{
  value: '足球',
  text: '足球'
  }]
 },
 '星期二': {
  '1': [{
  value: '聽力',
  text: '聽力'
  }],
  '2': [{
  value: '數(shù)學(xué)',
  text: '數(shù)學(xué)'
  }]
 },
 '星期三': {
  '1': [{
  value: '計(jì)算機(jī)',
  text: '計(jì)算機(jī)'
  }],
  '2': [{
  value: '游泳',
  text: '游泳'
  }, {
  value: '古漢語',
  text: '古漢語'
  }]
 },
 };
 
 $scope.getCourses = function (values) {
 if (!values.day || !values.hour) {
  return [];
 }
 return courses[values.day][values.hour];
 };
});

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。

您可能感興趣的文章: