在项目中有个2层的联动下拉的效果，百度了一下，发现都是在页面上写死了几个select 来实现的，在一些数据结构不一样的时候 就会玩不转了。比如切换到另一个的时候 它下面已经没有下一层结构的时候， 后面多出的select就多余了，而且在不知道多少层结构的时候，在页面中写死几个select 就完全不靠谱了。所以 只能是根据层级来创建select 。于是，下面的代码就这样产生了！
html:
1 <body ng-app=‘app‘>
2 <div ng-controller=‘demo‘>
3 <h2>{{head}}</h2>
4 <select select-more-mune ng-options="c.title for c in data" ng-model=‘C0‘>
5 <option value="">-- chose color --</option>
6 </select>
7 </div>
script:
1 var app = angular.module(‘app‘,[]);
2
3 app.directive(‘selectMoreMune‘, [‘$compile‘, function($compile){
4 return {
5 restrict:‘A‘,
6 link:function(scope, iElement, iAttrs){
7 var watch = iAttrs.ngModel;
8 var $e = $(iElement[0]);
9 scope.$watch(watch, function(newVal, oldVal){
10 if(newVal === oldVal){return;}
11 $e.nextAll().remove();
12 if(scope[watch] && angular.isArray(scope[watch].citys)){
13 var arr = [];
14 var index = $e.siblings().length+1;
15 scope[‘d‘+index] = scope[watch].citys;
16 arr.push("<select select-more-mune ng-model=‘C"+index+"‘ ng-options=‘c.title for c in d"+index+"‘>");
17 arr.push(‘<option value="">-- chose color --</option>‘);
18 arr.push(‘</select>‘);
19 var newNode = $compile(arr.join(‘‘))(scope);
20 $e.after(newNode);
21 }
22 });
23 }
24 }
25 }]);
26
27 app.controller(‘demo‘,[‘$scope‘, function($scope, $compile){
28 $scope.head = ‘联动测试‘;
29
30 $scope.data = [
31 {title:‘省1111‘,
32 citys:[
33 {title:‘市1111‘},
34 {title:‘市2222‘,citys:[{title:‘222县1111‘},{title:‘444县2222‘}]},
35 {title:‘市33333‘,citys:[{title:‘333县1111‘}]}
36 ]
37 },
38 {title:‘省22222‘,
39 citys:[
40 {title:‘市4444‘,citys:[{title:‘44县1111‘}]},
41 {title:‘市55555‘,citys:[{title:‘222县1111‘},{title:‘22县2222‘}]},
42 {title:‘市666666‘,citys:[{title:‘县1111‘}]}
43 ]
44 },
45 {title:‘省33333‘,
46 citys:[
47 {title:‘市7777‘,citys:[{title:‘县1111‘}]},
48 {title:‘市88888‘,citys:[{title:‘县1111‘},{title:‘县2222‘}]},
49 {title:‘市9999‘,citys:[{title:‘县1111‘}]}
50 ]
51 }
52 ];
53 }]);
时间： 2024-08-06 16:06:10