首页 > 代码库 > angular 实现无限极联动下拉
angular 实现无限极联动下拉
在项目中有个2层的联动下拉的效果，百度了一下，发现都是在页面上写死了几个select 来实现的，在一些数据结构不一样的时候 就会玩不转了。比如切换到另一个的时候 它下面已经没有下一层结构的时候， 后面多出的select就多余了，而且在不知道多少层结构的时候，在页面中写死几个select 就完全不靠谱了。所以 只能是根据层级来创建select 。于是，下面的代码就这样产生了！
html:
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 =http://www.mamicode.com/ [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 }]);
angular 实现无限极联动下拉
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。