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,用起來還是有些問題的，比如使用者按下滑鼠左鍵的時候，快速選擇時間段的話，有的時間點就沒有記錄下來，這個問題的關鍵是使用者選擇的時候速度過快，以至於程式碼還沒有將滑鼠滑過的資料改變，已經滑過下一個了。
解決的辦法有一個，就是速度不要過快。哈哈哈！
2017.1215 更新
將此外掛改造為x軸y軸拖動選擇區域範圍時間，具體程式碼見下面github地址。
最後貢獻一下我的程式碼：https://github.com/wangbaogui123/learn.git
相關文章
- 時間選擇外掛ClockPickerKPI
- 微信小程式-選擇時間（一週的某一時刻）微信小程式
- 關於My97DatePicker時間外掛選擇周的時間格式
- 小程式年月日時間段區間選擇
- 12款優秀的JavaScript日曆和時間選擇外掛JavaScript
- 用Axure實現對時間段的篩選
- 精心挑選12款優秀的 JavaScript 日曆和時間選擇外掛JavaScript
- IOS之UIDatePicker實現時間日期選擇iOSUI
- 時間線外掛
- 實用的 jQuery下拉選擇框外掛集合jQuery
- 使用 vite 構建一個表情選擇外掛Vite
- jquery Mobiscroll日期時間選擇外掛使用 以及設定defaultValue屬性不起作用jQuery
- [外掛擴充套件]跪求時間軸外掛套件
- TCP 可靠傳輸的實現-02超時重傳時間的選擇/03選擇確認 SACKTCP
- 如何實現模糊查詢時間段
- element-ui 時間選擇器設定時間選擇範圍UI
- 如何實現一個 滑鼠點選特效的 chrome外掛特效Chrome
- AlloyTouch之select選擇外掛
- vue 手寫一個時間選擇器Vue
- 基於Vue2的一個人員選擇外掛Vue
- [需求建議]外掛建議：建議出一個時間軸外掛
- JBOSS5.1執行一段時間後掛掉
- ElementUI 日期選擇器 DatePicker 實現週一，週二之類的速選UI
- 【請抓緊時間上車】實現一個12306的chrom外掛
- 自定義時間選擇器
- 推薦 15 個 jQuery 選擇框外掛jQuery
- 11個JavaScript顏色選擇器外掛JavaScript
- element日期選擇器，時間範圍設定為一週，vue中的寫法Vue
- angular日曆外掛---- angular-daterangepickerAngular
- 遊戲陪玩系統開發，日期時間選擇介面的實現遊戲
- [外掛擴充套件]工作時間軸（新外掛後臺）套件
- 從零實現一個 VuePress 外掛Vue
- PHP外掛系統的實現(一)PHP
- BootStrapDatePicker時間選擇器--TangobootGo
- iOS簡易時間選擇器iOS
- AngularJS教程十六—— 時間選擇AngularJS
- 生命週期階段與外掛目標的繫結關係
- jquery實現的全選和刪除功能外掛jQuery