首页 > 代码库 > angular 的 二级联动(forEach实战)
angular 的 二级联动(forEach实战)
在下才疏学浅，不足之处，还望多多指教。
直接上代码
<!DOCTYPE html><html lang="en" ng-app="indexApp"><head> <meta charset="UTF-8"> <title>Title</title> <script src="http://www.mamicode.com/js/angular.js"></script> <style> select{ width:150px; vertical-align:middle; } p{ display: inline-block; cursor: pointer; } </style></head><body ng-controller="indexCtrl"><select ng-change="changeOne(oneData,first)" ng-model="oneData"> <option ng-repeat="item in first" value="http://www.mamicode.com/{{item.id}}">{{item.name}}</option></select><select ng-change="changeTwo()" ng-model="twoData" multiple="multiple" size="10"> <option ng-repeat="item in next" value="http://www.mamicode.com/{{item.id}}">{{item.name}}</option></select><p> <span ng-click="addLast(twoData,next)">-></span><br> <span ng-click="delLast(lastData,last)"><-</span></p><select ng-model="lastData" size="10" multiple="multiple"> <option ng-repeat="item in last track by $index" value="http://www.mamicode.com/{{item.id}}">{{item.name}}</option></select><script> angular.module(‘indexApp‘,[]) .controller(‘indexCtrl‘,function($scope){ $scope.first =[ { id:1, name:‘前端‘, child:[ {id:1,name:‘CSS3‘}, {id:2,name:‘HTML‘}, {id:3,name:‘js‘}, {id:4,name:‘angular‘}, {id:5,name:‘bootstrap‘} ] }, { id:2, name:‘后端‘, child:[ {id:6,name:‘java‘}, {id:7,name:‘php‘}, {id:8,name:‘node‘} ] } ]; $scope.changeOne = function(oneData,first){ angular.forEach(first,function(i,j){ if(oneData =http://www.mamicode.com/= i.id){ $scope.next = i.child; } }) }; var boxLast=[]; $scope.addLast = function(twoData,next){ //添加 next.forEach(function(i,j){ if(parseInt(twoData) == parseInt(i.id)){ boxLast.push(i) } }); //排重 var a ={},b=[],c=[]; for(var i =0;i<boxLast.length;i++){ if( !a [boxLast[i].id] ){ a [boxLast[i].id]=true; b.push(boxLast[i]); }else{ c.push(boxLast[i].name); } } if(c.length>0){ alert(c+‘已添加‘); } boxLast = b; $scope.last = b; }; $scope.delLast = function(lastData,last){ last.forEach(function(i,j){ if(parseInt(lastData) == parseInt(i.id)){ $scope.last.splice(j,1); //删除从 左往右的 第n个 数组内容，删除一个 } }) }; });</script></body></html>
执行效果如下：
页面比较简陋，但足以说明问题。
我们需要注意的有以下几点：
1. angular.forEach的使用（可以看下在下对forEach的拙见）
2. arr[10].splice（5，1） 意思是：删除数组的第五个元素
angular 的 二级联动(forEach实战)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。