angular实现两个select选择框互相传值

思路就是两个select下拉框作为展示,实际操作两个数组之间内容的增加和删除,

实现代码如下:

$scope.fileTypeOption = [{type: 'SourceCode',name: '源码'}, {type: 'DesignPicture',name: '设计图'}, {type: 'Document',name: '文档'}, {type: 'Video',name: '视频'}];$scope.typeSelect = null;// $scope.$scope.ListCount = [""];$scope.showtoHtml = [];$scope.toIndex = [];$scope.typetoSelect = null;$scope.from = function() {if ($scope.typeSelect != null) {var showtoList;// console.log(type);for (var i = 0; i < $scope.typeSelect.length; i++) {switch ($scope.typeSelect[i]) {case "SourceCode":showtoList = {type: 'SourceCode',name: '源码'};break;case "DesignPicture":showtoList = {type: 'DesignPicture',name: '设计图'}break;case "Document":showtoList = {type: 'Document',name: '文档'}break;case "Video":showtoList = {type: 'Video',name: '视频'}break;default:break;}for (var j = 0; j < $scope.fileTypeOption.length; j++) {if ($scope.fileTypeOption[j].type == $scope.typeSelect[i]) {$scope.fileTypeOption.splice(j, 1);}};$scope.showtoHtml.push(showtoList);// console.log($scope.showtoHtml);}} else {Notifier.notifyWarning("至少选中一项");}$scope.typeSelect=null;};$scope.to = function() {if ($scope.typetoSelect != null) {for (var i = 0; i < $scope.typetoSelect.length; i++) {var showBack;switch ($scope.typetoSelect[i]) {case "SourceCode":showBack = {type: 'SourceCode',name: '源码'};break;case "DesignPicture":showBack = {type: 'DesignPicture',name: '设计图'}break;case "Document":showBack = {type: 'Document',name: '文档'}break;case "Video":showBack = {type: 'Video',name: '视频'}break;default:break;}for (var j = 0; j < $scope.showtoHtml.length; j++) {if ($scope.showtoHtml[j].type == $scope.typetoSelect[i]) {$scope.showtoHtml.splice(j, 1);}};$scope.fileTypeOption.push(showBack);// console.log($scope.fileTypeOption);};} else {Notifier.notifyWarning("至少选择一项");}$scope.typetoSelect=null;}

对应页面代码部分如下;

                                     <tr><td><select style="width:200px" ng-model="typeSelect" multiple="multiple" ng-options="typeSelect.type as typeSelect.name for typeSelect in fileTypeOption"></select></td><td><button ng-click="from()">--></button><br/><button ng-click="to(typetoSelect)"><-- </button></td><td><select style="width:200px" ng-model="typetoSelect" multiple="multiple" ng-options="typetoSelect.type as typetoSelect.name for typetoSelect in showtoHtml"></select></td></tr>

实现效果: