Infinite-Level linkage menu (using demo) in Angularjs

Original address: http://www.cnblogs.com/front-end-ralph/p/5133122.html

Yesterday did not have time to paste a few use the demo, today to fill up, for interested classmates reference:)

1. Synchronous loading sub-option Demo
2. Asynchronous load sub-option Demo
3. Initial Value Backfill Demo
4. Inverted pyramid relies on demo

Directive source code please go to the previous post:
Http://www.cnblogs.com/front-end-ralph/p/5131687.html

1. Synchronous Load sub-option
Before the linkage menu was loaded, we had some way (such as back-end rendering, API dependency, deferred dependency, etc.) to get the various kinds of data needed to render all levels of the menu, and we just had to use that data to
[{
Text: ' Some text ',
Value: ' Some value '
},]
form and encapsulate it as a data source function. Take the province-city linkage as an example:
HTML section:
Note that the dependents= "province" is declared in the second select to achieve linkage

<SelectMulti-level-select Source= "Getprovinces"name= "Province"Ng-model= "Form.province"Empty= "Please select Province"></Select><SelectMulti-level-select Source= "GetCities"name= "City"Ng-model= "Form.city"Empty= "Please select City"Dependents= "Province"></Select>

Controller section:
preprocessing data, providing data source functions

Controller (' Myctrl ', [' $scope ',function($scope) {//angular use good habits to put primitive values on objects    varform = {}; $scope. Form=form; vardata =[{name:Zhejiang, ID:10, cities: [{name:Hangzhou, ID:100}, {name:Ningbo, ID:101}, {name:Wenzhou, ID:102}]}, {name:Guangdong, ID:20, cities: [{name:Guangzhou, ID:200}, {name:Shenzhen, ID:201}, {name:Foshan, ID:202}]}, {name:Shandong, ID:30, cities: [{name:Jinan, ID:301}, {name:Qingdao, ID:60W}, {name:Yantai, ID:303        }]    }]; varProvinces = []; varCitieslookup = {}; //preprocessing, returns the data format of [{text: ' Some text ', value: ' Some value '},]$.each (data,function(index, province) {Provinces.push ({text:province.name, value:province.id}); varCities = []; $.each (Province.cities,function(index, city) {Cities.push ({text:city.name, value:city.id});        }); Citieslookup[province.id]=cities;     }); $scope. Getprovinces=function () {        returnprovinces;     }; $scope. GetCities=function(values) {returnCitieslookup[values.province] | | []; }; }]);

2. Asynchronous load sub-option Demo
The main difference is that the data source function should return a promise instance (using $q in Angularjs). To demonstrate convenience, there is no need to $http, except for preprocessing (which is the responsibility of the user's own business logic), exactly the same.
Very similar to the previous example, you only need to modify the two data source functions to:

$scope. getprovinces =function () {    return$q (function(resolve) {//Async should return promise, where there is no HTTP, except preprocessing (by the user's own business logic is responsible), exactly the same        //If you need to cache, please also be responsible for yourself here$timeout (function() {Resolve (provinces); }, 100); });}; $scope. GetCities=function(values) {return$q (function(Resolve) {$timeout (function() {resolve (Citieslookup[values.province]|| []); }, 100); });};

3. Initial value Backfill
Since this requirement is clear in the early stages of development, no additional work is required on the use, and if there is an initial value, it is only necessary to assign it to the controller:

// angular use good habits to put primitive values on objects var form == = 301;

4. Inverted Gold tower dependent
The dependency declaration is done in the form of a comma-separated string, which is very convenient to use.
Consider the following scenario:
The academic office needs students to evaluate the course, the students choose the week, then select the time, and then select the specific Course drop-down box
Weeks and hours are not dependent on each other, the course dropdown box depends on the week and time, in other words, once the week and the time of any change, the course drop-down box should be updated.
HTML section:
Note that the Dependents property of the third select is Day,hour, which is dependent on both day and hour

<SelectMulti-level-select Source= "GetDays"name= "Day"Ng-model= "Form.day"Empty= "Please select the Week"></Select><SelectMulti-level-select Source= "GetHours"name= "Hour"Ng-model= "Form.hour"Empty= "Please select Time"></Select><SelectMulti-level-select Source= "Getcourses"name= "Course"Ng-model= "Form.course"Empty= "Please select Course"Dependents= "Day,hour"></Select>

Controller section:
Similar to the previous example, there is nothing special, preprocessing the data and providing the data source function.

Controller (' Myctrl ',function($scope) {varform = {}; $scope. Form=form; $scope. GetDays=function () {        varDays = ' 123 '. Split ('); Days.foreach (function(item, index) {Days[index]={text:' Week ' +Item, Value:' Week ' +Item};        }); returnDays ;     }; $scope. GetHours=function () {        return[{text:' 09:00-12:00 ', Value:' 1 '}, {text:' 14:00-17:00 ', Value:' 2 '        }];     }; varCourses = {        ' Monday ': {            ' 1 ': [{value:Mathematical, Text:Mathematical}, {value:Intensive reading, Text:Intensive reading            }],            ' 2 ': [{value:Football, Text:Football            }]        },        ' Tuesday ': {            ' 1 ': [{value:Hearing, Text:Hearing            }],            ' 2 ': [{value:Mathematical, Text:Mathematical            }]        },        ' Wednesday ': {            ' 1 ': [{value:Computer, Text:Computer            }],            ' 2 ': [{value:Swimming, Text:Swimming}, {value:' Ancient Chinese ', Text:' Ancient Chinese '            }]        },    }; $scope. Getcourses=function(values) {if(!values.day | |!values.hour) {return []; }        returnCourses[values.day][values.hour]; };});

Infinite-Level linkage menu (using demo) in Angularjs