控制属性为multiple的select

　　需求：实现点击查询，搜索对应渠道已投放、未投放批次。如图：

 

html:

 <div class="form-inline margin-top-20">
        <div class="form-group has-feedback">
            <label control-label margin-left-15 style="font-size:16px">🔍渠道搜索:</label>
            <div class="dlb ui-select-bg">
                <input type="text" class="form-control" ng-model="name" class="w120"  placeholder="请输入渠道名称">
            </div>
            <div class="form-group margin-left-20">
               
                <input ng-click="submit()" class="btn btn-info btn-xs" type="submit" value="查询">
            </div>
        </div>
        <div class="margin-top-20">
            <form name="form">
            <div style="display:inline-block">
                <span style="vertical-align: top;">未投放批次</span>
                <select multiple="multiple" name="se1" style="height:400px;width:100px;">
                <option ng-repeat='(index,item) in unput' value="{{item.batch_id}}">{{item.batch_name}}</option>
           
            </select>
            </div>          
            <input class="btn btn-info btn-xs margin-left-20" type="button" value="新增" ng-click="add()"/>
            <input class="btn btn-info btn-xs" type="button" value="删除" ng-click="plu()"/>
            <div style="display:inline-block">
                <select multiple="multiple" name="se2" style="height:400px;width:100px;margin-left:20px"> 
                    <option ng-repeat='(index,item) in put' value="{{item.batch_id}}">{{item.batch_name}}</option>

                </select>
                <span style="vertical-align: top;">已投放批次</span>

            </div>
            
       </form>
    </div>

js:

/**
 * Created by huangli on 17/3/27.
 */
var path = require('path');
angular.module('App').controller('activityConfigCtrl',['$scope','$http','queryList','description','dateGather','$uibModal','$rootScope','userInfo','tips',function($scope,$http,queryList,description,dateGather,$uibModal,$rootScope,userInfo,tips){

    //默认url
    var url = '/Rest/Urlchannel/searchChannel';
    var urlId = '';

    $scope.name='51test';

    var se1 = document.form.se1;
    var se2 = document.form.se2;
    var arr = new Array();
    var arrAdd = [];
    var arrDel = [];

    urlId = JSON.parse(localStorage.urlId);

    //搜索渠道
    $scope.submit = function(){
        tips.text('加载中，请稍候...', false);


        $http({
            method: "POST",
            contentType: "application/json",
            url: "/Rest/Urlchannel/searchChannel",
            data: {
                name:$scope.name,
                url_id:urlId
            },
            dataType : "json",
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'token':userInfo.token
            },
            transformRequest: function(obj) {
                var str = [];
                for (var p in obj) {
                    str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
                }
                return str.join("&");
            }

        }).then(function(res) {
        　
            se1.options.length=0;
            se2.options.length=0;
                
            if(res.data.code==200){
                $scope.unput = res.data.data.unput;
                $scope.put = res.data.data.put;
                $scope.channelId = res.data.data.channel_id;
                tips.text(res.data.msg);
            }else{
                tips.text(res.data.msg);
            }
        }).then(null,function(xhr) {
            if (xhr && xhr.message) {
                tips.text(xhr.message);
            } else {
                tips.text('网络出错，请稍候再试！');
            }
        });
    }

     //设置渠道
    $scope.setChannel = function (sign,batchs) {
        $http({
            method: "POST",
            contentType: "application/json",
            url: "/Rest/Urlchannel/setChannel",
            data: {
                url_id:urlId,
                sign:sign,
                batchs:batchs

            },
            dataType : "json",
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'token':userInfo.token
            },
            transformRequest: function(obj) {
                var str = [];
                for (var p in obj) {
                    str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
                }
                return str.join("&");
            }

        }).then(function(res) {                
                if(res.data.code == 200){
                   
                    if(sign=='add'){
                        for(var i=0;i<se1.length;i++) {
                            if(se1[i].selected) {
                                se2.options.add(new Option(se1[i].text, se1[i].value));
                            }

                        }
                        
                        $scope.refresh(se1);
                        tips.text(res.data.msg);
                    } else{
                        for(var i=0;i<se2.length;i++) {
                            if(se2[i].selected) {
                                se1.options.add(new Option(se2[i].text, se2[i].value));                                                         
                            }
                        }
                        $scope.refresh(se2);
                        tips.text(res.data.msg);                        
                    }                 
                }else {
                   tips.text(res.data.msg);
                }

        }).then(null,function(xhr) {
            if (xhr && xhr.message) {
                tips.text(xhr.message);
            } else {
                tips.text('网络出错，请稍候再试！');
            }
        });
    }
   
    $scope.add=function(){
        var j=0;
        for(var i=0;i<se1.length;i++) {
            if(se1[i].selected) {
                // se2.options.add(new Option(se1[i].text, se1[i].value));
                j= j+1;
                arr.push(se1[i]);
                $scope.str = $scope.channelId+'_'+se1[i].value;
                arrAdd.push($scope.str);       
            }                   
        }
        if(j==0){
            tips.text('请选择批次！');
            return;
        }
        $scope.sign = 'add';
        $scope.setChannel ($scope.sign,arrAdd);      
        //$scope.refresh(se1);
    }
    $scope.refresh=function(o){
        for(var i=0;i<arr.length;i++) {
            o.removeChild(arr[i]);
        }
        
        arr.length=0;
    }
    $scope.plu=function() {
        var k = 0;
        for(var i=0;i<se2.length;i++) {
            if(se2[i].selected) {
                 k= k+1;
                //se1.options.add(new Option(se2[i].text, se2[i].value));
                arr.push(se2[i]);
                $scope.str = $scope.channelId+'_'+se2[i].value;
                arrDel.push($scope.str)
            }
        }
        if(k==0){
            tips.text('请选择批次！');
            return;
        }
        $scope.sign = 'del';
        $scope.setChannel ($scope.sign,arrDel);

    }


}]);

 se1.options.length=0;
 se2.options.length=0; 这两句的作用是：在每次点击查询之前，把option中之前选中的数据清空，不然，每次点击还是会出现两次刚才操作的数据。

参考资料：1、http://bbs.csdn.net/topics/390214988