How to realize Multi-level drop-down Box with AngularJS
This article mainly explains "how to achieve multi-level drop-down box in AngularJS". Interested friends may wish to take a look at it. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "how to achieve multi-level drop-down box in AngularJS"!
The specific code is as follows
Select address: please select-Please select var app = angular.module ('MultiDropDownApp', []); / / you can add your own injected service app.controller (' MultiDropDownControl', ['$scope','$http', function ($scope, $http) {var vm = this; vm.provinceSort = [] Vm.citySort = []; / / Select a provincial unit to initialize the secondary linkage of municipal data vm.selectProvince = function () {var fatherID = vm.province.id; vm.citySort = [] $http ({method: 'POST', url:' / AngularjsStudy/GetChildrenSort', data: {fatherID: fatherID}}) .then (function successCallback (data) {vm.citySort = data.data }, function errorCallback (response) {/ / request failed to execute code}) } / / initialization page function init () {/ / save $http ({method: 'POST', url:' / AngularjsStudy/GetProvinceSort' Data: {}}) .then (function successCallback (data) {/ / load drop-down box data vm.provinceSort = data.data / / set the default option vm.province = vm.provinceSort [0];}, function errorCallback (response) {/ / request failed to execute code});} / / initialize init ();}])
Controller
Public ActionResult GetProvinceSort () {List districts = new List (); districts.Add (new District () {id=1,fatherID=0,name= "Hunan"}); districts.Add (new District () {id= 2, fatherID=0,name= "Hubei"}); districts.Add (new District () {id= 3, fatherID=0,name= "Sichuan Province"}) Return Json (districts);} public ActionResult GetChildrenSort (int fatherID) {List districts = new List (); switch (fatherID) {case 1: districts.Add (new District () {id = 4, fatherID = 1, name = "Changsha"}) Districts.Add (new District () {id = 5, fatherID = 1, name = "Yueyang"}); districts.Add (new District () {id = 6, fatherID = 1, name = "Zhuzhou City"}); return Json (districts) Case 2: districts.Add (new District () {id = 7, fatherID = 2, name = "Wuhan"}); districts.Add (new District () {id = 8, fatherID = 2, name = "Yichang"}); return Json (districts) Case 3: districts.Add (new District () {id = 9, fatherID = 3, name = "Chengdu"}); districts.Add (new District () {id = 10, fatherID = 3, name = "Suining"}); districts.Add (new District () {id = 11, fatherID = 3, name = "Bazhong"}) Districts.Add (new District () {id = 12, fatherID = 3, name = "Mianyang"}); districts.Add (new District () {id = 13, fatherID = 3, name = "Nanchong"}); return Json (districts) Default: districts.Add (new District () {id = 14, fatherID =-1, name = "I don't know what ∑ Q | thanks thanks | p"}); return Json (districts);}}
Model
Public class District {public int id {get; set;} / root node FatherID=0 / public int fatherID {get; set;} public string name {get; set;}} so far, I believe you have a deeper understanding of "how AngularJS implements multi-level drop-down boxes". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!
