AngularJS中實現無限級聯動菜單（使用demo）

昨天沒來得及貼幾個使用demo，今天補上，供有興趣的同窗參考 :)

1. 同步加載子選項demo
2. 異步加載子選項demo
3. 初始值回填demo
4. 倒金字塔依賴demo

directive的源代碼請移步上一個帖子：
http://www.cnblogs.com/front-end-ralph/p/5131687.html

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];
    };
});

 

有興趣的同窗若是須要其餘應用場景下的demo也能夠告訴我 :)