angular 實現時間段選擇組件

前段時間公司有個後臺項目須要使用一個選擇時間段的組件，看了一下就本身寫了一下，用angular寫這種插件仍是很簡單的。

先看看最終是什麼樣子的：

功能是用戶能夠選擇任意時間段，鼠標能夠拖動任意的一週的時間段，鬆開鼠標結束選擇。
話很少說，下面上代碼：
頁面結構大致是這樣的。

<div class="gb-timearr-box" ng-controller="Timearr">
        <div class="cont-box">

            <div class="top">
                <div class="left">
                    <span class="days">
                        時間
                    </span>
                    <span class="week">
                        星期
                    </span>
                </div>
                <div class="right">
                    <p><span>上午</span><span>下午</span></p>
                    <ul>
                        <li ng-repeat='item in timearr.days '>{{item}}</li>
                    </ul>
                </div>
            </div>
            <div class="week-box">
                <ul ng-repeat="arr in timearr.timecont.all" ng-mousedown="downul($index)" ng-mouseup="mouseupul($index)" ng-mouseleave="mouseleaveul($index)">
                    <li ng-click="celectTime(arr.week)">星期{{arr.week}}</li>
                    <li ng-repeat="item in arr.time" ng-class="{true:'cur',false:''}[item.ok]" ng-click="celectTime(arr.week,$index)" ng-mouseleave="mouseenterli($index)" data-time="{{item.num}}"></li>
                </ul>
            </div>


        </div>

    </div>

js：

<script type="text/javascript" src="../angular.js"></script>
    <script type="text/javascript">
        var app = angular.module('app', []);

        app.controller("Timearr",['$scope',function($scope){
            
            $scope.timearr = {
                days:[],
                duo:false,
                ulindex:"",
                timecont:{
                    all : [
                        {
                            week:'一',
                            time:[
                                {ok:false,num:"0"},{ok:false,num:"0.30"},{ok:false,num:"1"},{ok:false,num:"1.30"},{ok:false,num:"2"},{ok:false,num:"2.30"},{ok:false,num:"3"},{ok:false,num:"3.30"},{ok:false,num:"4"},{ok:false,num:"4.30"},{ok:false,num:"5"},{ok:false,num:"5.30"},{ok:false,num:"6"},{ok:false,num:"6.30"},{ok:false,num:"7"},{ok:false,num:"7.30"},{ok:false,num:"8"},{ok:false,num:"8.30"},{ok:false,num:"9"},{ok:false,num:"9.30"},{ok:false,num:"10"},{ok:false,num:"10.30"},{ok:false,num:"11"},{ok:false,num:"11.30"},{ok:false,num:"12"},{ok:false,num:"12.30"},{ok:false,num:"13"},{ok:false,num:"13.30"},{ok:false,num:"14"},{ok:false,num:"14.30"},{ok:false,num:"15"},{ok:false,num:"15.30"},{ok:false,num:"16"},{ok:false,num:"16.30"},{ok:false,num:"17"},{ok:false,num:"17.30"},{ok:false,num:"18"},{ok:false,num:"18.30"},{ok:false,num:"19"},{ok:false,num:"19.30"},{ok:false,num:"20"},{ok:false,num:"20.30"},{ok:false,num:"21"},{ok:false,num:"21.30"},{ok:false,num:"22"},{ok:false,num:"22.30"},{ok:false,num:"23"},{ok:false,num:"23.30"}
                            ]
                        },
                        {
                            week:'二',
                            time:[
                                {ok:false,num:"0"},{ok:false,num:"0.30"},{ok:false,num:"1"},{ok:false,num:"1.30"},{ok:false,num:"2"},{ok:false,num:"2.30"},{ok:false,num:"3"},{ok:false,num:"3.30"},{ok:false,num:"4"},{ok:false,num:"4.30"},{ok:false,num:"5"},{ok:false,num:"5.30"},{ok:false,num:"6"},{ok:false,num:"6.30"},{ok:false,num:"7"},{ok:false,num:"7.30"},{ok:false,num:"8"},{ok:false,num:"8.30"},{ok:false,num:"9"},{ok:false,num:"9.30"},{ok:false,num:"10"},{ok:false,num:"10.30"},{ok:false,num:"11"},{ok:false,num:"11.30"},{ok:false,num:"12"},{ok:false,num:"12.30"},{ok:false,num:"13"},{ok:false,num:"13.30"},{ok:false,num:"14"},{ok:false,num:"14.30"},{ok:false,num:"15"},{ok:false,num:"15.30"},{ok:false,num:"16"},{ok:false,num:"16.30"},{ok:false,num:"17"},{ok:false,num:"17.30"},{ok:false,num:"18"},{ok:false,num:"18.30"},{ok:false,num:"19"},{ok:false,num:"19.30"},{ok:false,num:"20"},{ok:false,num:"20.30"},{ok:false,num:"21"},{ok:false,num:"21.30"},{ok:false,num:"22"},{ok:false,num:"22.30"},{ok:false,num:"23"},{ok:false,num:"23.30"}
                            ]
                        },
                        {
                            week:'三',
                            time:[
                                {ok:false,num:"0"},{ok:false,num:"0.30"},{ok:false,num:"1"},{ok:false,num:"1.30"},{ok:false,num:"2"},{ok:false,num:"2.30"},{ok:false,num:"3"},{ok:false,num:"3.30"},{ok:false,num:"4"},{ok:false,num:"4.30"},{ok:false,num:"5"},{ok:false,num:"5.30"},{ok:false,num:"6"},{ok:false,num:"6.30"},{ok:false,num:"7"},{ok:false,num:"7.30"},{ok:false,num:"8"},{ok:false,num:"8.30"},{ok:false,num:"9"},{ok:false,num:"9.30"},{ok:false,num:"10"},{ok:false,num:"10.30"},{ok:false,num:"11"},{ok:false,num:"11.30"},{ok:false,num:"12"},{ok:false,num:"12.30"},{ok:false,num:"13"},{ok:false,num:"13.30"},{ok:false,num:"14"},{ok:false,num:"14.30"},{ok:false,num:"15"},{ok:false,num:"15.30"},{ok:false,num:"16"},{ok:false,num:"16.30"},{ok:false,num:"17"},{ok:false,num:"17.30"},{ok:false,num:"18"},{ok:false,num:"18.30"},{ok:false,num:"19"},{ok:false,num:"19.30"},{ok:false,num:"20"},{ok:false,num:"20.30"},{ok:false,num:"21"},{ok:false,num:"21.30"},{ok:false,num:"22"},{ok:false,num:"22.30"},{ok:false,num:"23"},{ok:false,num:"23.30"}
                            ]
                        },
                        {
                            week:'四',
                            time:[
                                {ok:false,num:"0"},{ok:false,num:"0.30"},{ok:false,num:"1"},{ok:false,num:"1.30"},{ok:false,num:"2"},{ok:false,num:"2.30"},{ok:false,num:"3"},{ok:false,num:"3.30"},{ok:false,num:"4"},{ok:false,num:"4.30"},{ok:false,num:"5"},{ok:false,num:"5.30"},{ok:false,num:"6"},{ok:false,num:"6.30"},{ok:false,num:"7"},{ok:false,num:"7.30"},{ok:false,num:"8"},{ok:false,num:"8.30"},{ok:false,num:"9"},{ok:false,num:"9.30"},{ok:false,num:"10"},{ok:false,num:"10.30"},{ok:false,num:"11"},{ok:false,num:"11.30"},{ok:false,num:"12"},{ok:false,num:"12.30"},{ok:false,num:"13"},{ok:false,num:"13.30"},{ok:false,num:"14"},{ok:false,num:"14.30"},{ok:false,num:"15"},{ok:false,num:"15.30"},{ok:false,num:"16"},{ok:false,num:"16.30"},{ok:false,num:"17"},{ok:false,num:"17.30"},{ok:false,num:"18"},{ok:false,num:"18.30"},{ok:false,num:"19"},{ok:false,num:"19.30"},{ok:false,num:"20"},{ok:false,num:"20.30"},{ok:false,num:"21"},{ok:false,num:"21.30"},{ok:false,num:"22"},{ok:false,num:"22.30"},{ok:false,num:"23"},{ok:false,num:"23.30"}
                            ]
                        },
                        {
                            week:'五',
                            time:[
                                {ok:false,num:"0"},{ok:false,num:"0.30"},{ok:false,num:"1"},{ok:false,num:"1.30"},{ok:false,num:"2"},{ok:false,num:"2.30"},{ok:false,num:"3"},{ok:false,num:"3.30"},{ok:false,num:"4"},{ok:false,num:"4.30"},{ok:false,num:"5"},{ok:false,num:"5.30"},{ok:false,num:"6"},{ok:false,num:"6.30"},{ok:false,num:"7"},{ok:false,num:"7.30"},{ok:false,num:"8"},{ok:false,num:"8.30"},{ok:false,num:"9"},{ok:false,num:"9.30"},{ok:false,num:"10"},{ok:false,num:"10.30"},{ok:false,num:"11"},{ok:false,num:"11.30"},{ok:false,num:"12"},{ok:false,num:"12.30"},{ok:false,num:"13"},{ok:false,num:"13.30"},{ok:false,num:"14"},{ok:false,num:"14.30"},{ok:false,num:"15"},{ok:false,num:"15.30"},{ok:false,num:"16"},{ok:false,num:"16.30"},{ok:false,num:"17"},{ok:false,num:"17.30"},{ok:false,num:"18"},{ok:false,num:"18.30"},{ok:false,num:"19"},{ok:false,num:"19.30"},{ok:false,num:"20"},{ok:false,num:"20.30"},{ok:false,num:"21"},{ok:false,num:"21.30"},{ok:false,num:"22"},{ok:false,num:"22.30"},{ok:false,num:"23"},{ok:false,num:"23.30"}
                            ]
                        },
                        {
                            week:'六',
                            time:[
                                {ok:false,num:"0"},{ok:false,num:"0.30"},{ok:false,num:"1"},{ok:false,num:"1.30"},{ok:false,num:"2"},{ok:false,num:"2.30"},{ok:false,num:"3"},{ok:false,num:"3.30"},{ok:false,num:"4"},{ok:false,num:"4.30"},{ok:false,num:"5"},{ok:false,num:"5.30"},{ok:false,num:"6"},{ok:false,num:"6.30"},{ok:false,num:"7"},{ok:false,num:"7.30"},{ok:false,num:"8"},{ok:false,num:"8.30"},{ok:false,num:"9"},{ok:false,num:"9.30"},{ok:false,num:"10"},{ok:false,num:"10.30"},{ok:false,num:"11"},{ok:false,num:"11.30"},{ok:false,num:"12"},{ok:false,num:"12.30"},{ok:false,num:"13"},{ok:false,num:"13.30"},{ok:false,num:"14"},{ok:false,num:"14.30"},{ok:false,num:"15"},{ok:false,num:"15.30"},{ok:false,num:"16"},{ok:false,num:"16.30"},{ok:false,num:"17"},{ok:false,num:"17.30"},{ok:false,num:"18"},{ok:false,num:"18.30"},{ok:false,num:"19"},{ok:false,num:"19.30"},{ok:false,num:"20"},{ok:false,num:"20.30"},{ok:false,num:"21"},{ok:false,num:"21.30"},{ok:false,num:"22"},{ok:false,num:"22.30"},{ok:false,num:"23"},{ok:false,num:"23.30"}
                            ]
                        },
                        {
                            week:'七',
                            time:[
                                {ok:false,num:"0"},{ok:false,num:"0.30"},{ok:false,num:"1"},{ok:false,num:"1.30"},{ok:false,num:"2"},{ok:false,num:"2.30"},{ok:false,num:"3"},{ok:false,num:"3.30"},{ok:false,num:"4"},{ok:false,num:"4.30"},{ok:false,num:"5"},{ok:false,num:"5.30"},{ok:false,num:"6"},{ok:false,num:"6.30"},{ok:false,num:"7"},{ok:false,num:"7.30"},{ok:false,num:"8"},{ok:false,num:"8.30"},{ok:false,num:"9"},{ok:false,num:"9.30"},{ok:false,num:"10"},{ok:false,num:"10.30"},{ok:false,num:"11"},{ok:false,num:"11.30"},{ok:false,num:"12"},{ok:false,num:"12.30"},{ok:false,num:"13"},{ok:false,num:"13.30"},{ok:false,num:"14"},{ok:false,num:"14.30"},{ok:false,num:"15"},{ok:false,num:"15.30"},{ok:false,num:"16"},{ok:false,num:"16.30"},{ok:false,num:"17"},{ok:false,num:"17.30"},{ok:false,num:"18"},{ok:false,num:"18.30"},{ok:false,num:"19"},{ok:false,num:"19.30"},{ok:false,num:"20"},{ok:false,num:"20.30"},{ok:false,num:"21"},{ok:false,num:"21.30"},{ok:false,num:"22"},{ok:false,num:"22.30"},{ok:false,num:"23"},{ok:false,num:"23.30"}
                            ]
                        },
                        
                    ],
                    cur : []
                },
                selecTime : function(w,curindex){

                    var all = $scope.timearr.timecont.all,
                        cur = [],
                        curarr = $scope.timearr.timecont.cur;

                    for(var i = 0;i < all.length; i++){

                        if(all[i].week == w){
              
                            if(curindex){
                               all[i].time[curindex].ok = !all[i].time[curindex].ok; 
                            }else{
                               for(var s = 0;s < all[i].time.length;s++){
                                    all[i].time[s].ok = !all[i].time[s].ok;
                               } 
                            }

                        }
                        
                        for(var j=0;j<all[i].time.length;j++){

                            var obj = {};
                            if(all[i].time[j].ok){
                                obj.week = all[i].week;
                                obj.time = all[i].time[j].num;
                                cur.push(obj);
                            }
                        }
                        
                    }

                    var arr1 = [{week:"一",time:[]},{week:"二",time:[]},{week:"三",time:[]},{week:"四",time:[]},{week:"五",time:[]},{week:"六",time:[]},{week:"七",time:[]},];

                    for(var d = 0;d < cur.length; d++){
                        for(var a = 0; a<arr1.length;a++){
                            if(cur[d].week == arr1[a].week){
                                arr1[a].time.push(cur[d].time);
                            }
                        }
                    }

                    curarr = arr1;

                    console.log(curarr);


                },
                downul:function(i){
                    $scope.timearr.duo = true;
                    $scope.timearr.ulindex = i;
                    console.log(i);
                },
                mouseenterli:function(i){
                    
                    if($scope.timearr.duo){
                        $scope.timearr.timecont.all[$scope.timearr.ulindex].time[i].ok = !$scope.timearr.timecont.all[$scope.timearr.ulindex].time[i].ok;
                    }
                },
                mouseupul:function(i){
                    $scope.timearr.duo = false;
                },
                mouseleaveul:function(i){
                    if(i == $scope.timearr.ulindex){
                        $scope.timearr.duo = false;
                    }else{
                        $scope.timearr.duo = false;
                    }
                    
                }



            };
            $scope.timearr.days = ["0","1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23"];

            $scope.celectTime = $scope.timearr.selecTime;
            $scope.downul = $scope.timearr.downul;
            $scope.mouseenterli = $scope.timearr.mouseenterli;
            $scope.mouseupul = $scope.timearr.mouseupul;
            $scope.mouseleaveul = $scope.timearr.mouseleaveul;

        }])
    </script>

我模擬的數據比較臃腫，其實還能夠將 $scope.timearr 簡化一下的,這個組件主要靠的就是 $scope.timearr 記錄用戶選擇的時間段，而後輸出給後臺。

這裏有幾個事件我也是第一次用，angular的 ng-mousedown、ng-mouseup、ng-mouseleave,用起來仍是有些問題的，好比用戶按下鼠標左鍵的時候，快速選擇時間段的話，有的時間點就沒有記錄下來，這個問題的關鍵是用戶選擇的時候速度過快，以致於代碼尚未將鼠標滑過的數據改變，已經滑過下一個了。

解決的辦法有一個，就是速度不要過快。哈哈哈！

最後貢獻一下個人代碼：https://github.com/wangbaogui123/learn.git