AngularJS 原生代码实现穿梭框

​ 之前一段时间都在跟一个前端用 AngularJS 写的项目实习，有一个地方需要用到穿梭框，在网上找了几个组件，但是发现这个项目都没有引入这几个组件的框架，老板又不想引入新的框架，所以…只能手写一个，直接上手硬写。写之前觉得很难，但是写完之后觉得，也没有想象中的那么难。所以 行动 > 想法。最后吐槽一句： 这项目真垃圾，改别人的代码真痛苦。
​ 先说说思想： 就是有两个数组，一个数组存放所有的用户，一个数组存放被选中的用户，点击用户列表里面的用户时，触发事件将 用户名用变量存储，此时仅仅是点击了用户，还没有将该用户选中，然后再点击选中按钮时，触发事件，将这个储存的用户名添加到选中用户的数组中，此时右侧就出现了选中的用户名，左侧的用户列表不变。

​ 撤销的过程就是点击右侧的用户名，存储该用户名，然后点击撤销，触发事件将该元素从右侧数组中删除。

​ 全选就是将左侧的数组拷贝一份赋值给右侧数组。

​ 全撤就是将右侧数组赋值为空。

​ 先来一张效果图：

​ 然后上代码：

html：

<div class="select-user">
	<span class="select-user-title">接收用户</span>
	<div class="chuansuokuang">
    	<div class="csk-left">
			<div class="csk-left-title">用户列表</div>
			<div class="csk-left-search">
			<span class="iconfont icon-fangdajing"></span>
			<input type="text" class="csk-left-input" placeholder="请输入关键字搜索用户" ng-model="keywords" ng-change="searchUser()">
            </div>

        	<div>
        		<ul>
                	<li ng-repeat="item in data" ng-bind="item.userName" ng-click="selectUser(item.userName)" ng-class="status.uname === item.userName? 'seleted-li' : ''"></li>
                </ul>
            </div>
       </div>
       <div class="center">
           <div class="right-btn" ng-click="trueUser()">选中</div>
       	   <div class="left-btn" ng-click="cancleUser()">撤销</div>
           <div class="all-select" ng-click="allSelect()">全选</div>
           <div class="all-cancle" ng-click="allCancle()">全撤</div>
       </div>
       <div class="csk-right">
           <div class="csk-right-title">选中的用户</div>
           <ul>
              <li ng-repeat="item in selectedData" ng-bind="item.userName" ng-click="selectUser2(item.userName)" ng-class="status.uname2 === item.userName? 'seleted-li' : ''"></li>
       	   </ul>
       </div>
    </div>
</div>

css(less)：

   .select-user {
        display: flex;
        align-items: flex-start;
        margin-top: 40px;
        .select-user-title {
            font-size: 16px;
            margin-right: 10px;
        }
        .chuansuokuang {
            display: inline-block;
            width: 600px;
            height: 500px;
            //border: 2px solid #cccccc;
            border-radius: 4px;
            .csk-left {
                float: left;
                width: 270px;
                height: 100%;
               // border-right: 1px solid #cccccc;
                background-color: #F5F5F5;
                .csk-left-title {
                    width: 100%;
                    height: 40px;
                    font-size: 18px;
                    text-align: center;
                    padding-top: 10px;
                    background-color: #cccccc;
                }
                .csk-left-search {
                    position: relative;
                    .icon-fangdajing {
                        position: absolute;
                        top: 14px;
                        left: 25px;
                    }
                    .csk-left-input {
                        width: 86%;
                        height: 30px;
                        margin-top: 10px;
                        margin-left: 7%;
                        margin-bottom: 10px;
                        border: 1px solid #cccccc;
                        border-radius: 5px;
                        padding-left: 25px;

                    }
                }

                li {
                    width: 100%;
                    height: 30px;
                    padding-top: 5px;
                    text-align: center;
                    margin-top: 2px;
                    //background-color: #00a2d4;
                }
                li:hover {
                    background-color: #cccccc;
                }
                .seleted-li {
                    background-color: #3b97d7 !important;
                }
                ul {
                    height: 410px;
                    overflow: auto;
                }
            }
            .center {
                position: relative;
                float: left;
                width: 55px;
                height: 500px;
                .right-btn {
                    position: absolute;
                    top: 80px;
                    left: 10px;
                    width: 40px;
                    height: 25px;
                    padding-top: 2px;
                    text-align: center;
                    border: 1px solid #cccccc;
                    border-radius: 2px;
                }
                .left-btn {
                    position: absolute;
                    top: 150px;
                    left: 10px;
                    width: 40px;
                    height: 25px;
                    padding-top: 2px;
                    text-align: center;
                    border: 1px solid #cccccc;
                    border-radius: 2px;
                }
                .all-select {
                    position: absolute;
                    top: 220px;
                    left: 10px;
                    width: 40px;
                    height: 25px;
                    padding-top: 2px;
                    text-align: center;
                    border: 1px solid #cccccc;
                    border-radius: 2px;
                }
                .all-cancle {
                    position: absolute;
                    top: 290px;
                    left: 10px;
                    width: 40px;
                    height: 25px;
                    padding-top: 2px;
                    text-align: center;
                    border: 1px solid #cccccc;
                    border-radius: 2px;
                }
                div:hover {
                    border-color: #3b97d7;
                    color: #3b97d7;
                }
            }
            .csk-right {
                float: right;
                width: 270px;
                height: 100%;
               // border-left: 1px solid #cccccc;
                background-color: #F5F5F5;
                .csk-right-title {
                    width: 100%;
                    height: 40px;
                    font-size: 18px;
                    text-align: center;
                    padding-top: 10px;
                    background-color: #cccccc;
                }
                li {
                    width: 100%;
                    height: 30px;
                    padding-top: 5px;
                    text-align: center;
                    margin-top: 2px;
                    //background-color: #00a2d4;
                }
                li:hover {
                    background-color: #cccccc;
                }
                .seleted-li {
                    background-color: #3b97d7 !important;
                }
                ul {
                    height: 410px;
                    overflow: auto;
                }
            }
        }
    }

js:

// 1.需要的变量
$scope.status = {
     uname : '', // 点击的用户名
     uname2 : '',// 选中的用户名
}
$scope.data = []; // 存放所有用户
$scope.selectedData = []; // 存放选中的用户
$scope.keywords = ''; // 关键字搜索用户

// 2.函数

    /*
    *  输入关键字后  查找相关用户
    * */
    $scope.searchUser = function() {
        $scope.data = [{
            userName: '搜索中...'
        }]
        var params = {
            sFiledValue: $scope.keywords
        }
        httpService.http("后台接口", params, "post").then(function(data) {
            $scope.data = data.data.ldata
            if($scope.data.length == 0) {
                $scope.data = [{
                    userName: '未找到相关用户'
                }]
            }
        });
    }
  // 点击左侧用户 但还没有添加到右侧
    $scope.selectUser = function (uname) {
        $scope.status.uname = ''
        if(uname != '搜索中...' && uname != '未找到相关用户') { // 不能让他选中这两种情况
            $scope.status.uname = uname    
            $scope.bool = 'success'
        }
    }
    // 选择右侧选中的用户
    $scope.selectUser2 = function (uname) {
        $scope.status.uname2 = uname
    }
    // 确定选择用户 挪到右边穿梭框
    $scope.trueUser = function () {
        if( $scope.status.uname != '') {
            var a = 0;
            for(var i=0;i<$scope.selectedData.length;i++) {
                if($scope.selectedData[i].userName == $scope.status.uname) {  // 避免重复选择
                    a = 1;

                }
            }
            if(a === 0) {
                let user = {
                    userName: $scope.status.uname
                }
                $scope.selectedData.push(user);
            }
        }
    }
    // 取消选择用户 将右边穿梭框的人取消
    $scope.cancleUser = function () {
        for(var i=0;i< $scope.selectedData.length;i++) {
           if($scope.selectedData[i].userName == $scope.status.uname2)  {
               $scope.selectedData.splice(i,1)
           }
        }
    }
    // 全选
    $scope.allSelect = function () {
        $scope.selectedData=angular.copy($scope.data) // 一定要用angular.copy() 深拷贝
    }
    // 全撤
    $scope.allCancle = function () {
        $scope.selectedData=[]
        $scope.status.uname2 = ''
    }
    // 查询所有用户
    function searchAllUser() {
        var params = {
            sFiledValue: ''
        }
        httpService.http("后台接口", params, "post").then(function(data) {
            $scope.data = data.data.ldata
        });
    }