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
angular 实现时间段选择组件的更多相关文章
- ionic-基于angularjs实现的多级城市选择组件
大家都知道在移动端的选择地区组件,大部分都是模拟IOS选择器做的城市三级联动,但是在IOS上比较好,在Android上因为有的不支持ion-scroll.所以就会出现滚动不会自动回滚到某一个的正中间. ...
- angular2.x 下拉多选框选择组件
angular2.x - 5.x 的下拉多选框选择组件 ng2 -- ng5.最近在学angular4,经常在交流群看见很多人问 下拉多选怎么做... 今天就随便写的个. 组件源码 百度云 链接: ...
- react-native DatePicker日期选择组件的实现
本教程的实现效果如下: 为了实现其淡入/淡出的覆盖效果, 还有取消按钮, 在此用了一个三方的组件, 大家可以先安装一下: 三方组件的地址:https://github.com/eyaleizenber ...
- JS组件系列——不容错过的两款Bootstrap Icon图标选择组件
前言:最近好多朋友在群里面聊到bootstrap icon图标的问题,比如最常见的菜单管理,每个菜单肯定需要一个对应的菜单图标,要是有一个可视化的图标选择组件就好了,最好是直接选择图标,就能得到对应的 ...
- Magicodes.WeiChat——媒体资源选择组件之media-choice（开源）
media-choice为媒体资源选择组件,基于KnockoutJs.支持图片.语音.视频.图文的选择以及预览,支持默认选择类型,支持是否禁用选择类型的更改. 使用示例: <script id= ...
- NSIS：卸载时选择组件
原文 NSIS:卸载时选择组件 有时候,我们想要在卸载时也可以选择组件,进行定制性的卸载,那么,以下文字将简略讨论这个问题: 题外:我们想要卸载时选择组件,当然是在安装时要有组件选择页面的前提下,也就 ...
- bootstrap之双日历时间段选择控件—daterangepicker(汉化版)
jQuerybootstrapdaterangepicker汉化版 双日历时间段选择插件 — daterangepicker是bootstrap框架后期的一个时间控件,可以设定多个时间段选项,也可以自 ...
- vue仿京东省市区三级联动选择组件
工作中需要一个盒京东购物车地址选择相似的一个省市区三级联动选择组件,google查了下都是下拉框形式的,于是自己写了一个,希望对使用vue开发项目的朋友有帮助,显示效果如下:使用vue2.0开发 ht ...
- android 拍照和从相册选择组件
android 拍照及从相册选择组件 单独封装到一个 activity 中便于更好的复用 拍照或从相册选择成功后使用 EventBus 发出广播回传图片路径,和调用者充分解耦合 根据传入参数支持裁剪和 ...
随机推荐
- 剑指offer_数组中的逆序对
题目描述 在数组中的两个数字,如果前面一个数字大于后面的数字,则这两个数字组成一个逆序对.输入一个数组,求出这个数组中的逆序对的总数P. 并将P对1000000007取模的结果输出. 即输出P%100 ...
- 免费搭建wordpress博客有感
之前一直有搭建个wordpress博客的想法,但一直没有实施.最近离职之后,空闲时间多了起来,就开始折腾wordpress博客起来. wordpress博客可玩性很高,但刚开始只想练练手,就没有想买域 ...
- DAX基础入门 - 30分钟从SQL到DAX -- PowerBI 利器
看到漂漂亮亮的PowerBI报表,手痒痒怎么办?! 有没有面对着稀奇古怪的DAX而感到有点丈八金刚摸不着头脑或者干瞪眼?! 有没有想得到某个值想不出来DAX怎么写而直跳脚!? 看完这篇文章,你会恍然大 ...
- 3. Longest Substring Without Repeating Characters - 最长无重复字符子串-Medium
Examples: Description: Given a string, find the length of the longest substring without repeating ch ...
- 从输入url到页面加载完成发生了什么？——前端角度
这是一道经典的面试题,这道面试题不光前端面试会问到,后端面试也会被问到.这道题没有一个标准的答案,它涉及很多的知识点,面试官会通过这道题了解你对哪一方面的知识比较擅长,然后继续追问看看你的掌握程度.当 ...
- How do you make an awesome team?(来考验一下自己的英语能力吧)
How do you make an awesome team? I was talking to my awesome friend Amy Hanlon (who is a software en ...
- Python_入门
本章内容: 1.Python的种类 2.Python的环境 3.Python入门(解释器.编码.pyc文件.脚步传入参数.变量.输入.流程控制与缩进.while循环) 4.练习题 Python的种类 ...
- codeforces 372E. Drawing Circles is Fun
tags:[圆の反演][乘法原理][尺取法]题解:圆の反演:将过O点的圆,映射成不过O的直线,相切的圆反演出来的直线平行.我们将集合S中的点做反演变换:(x,y)->(x/(x^2+y^2), ...
- nosql使用感受
最近一个项目尝试了使用ssdb(一个类似于redis的数据结构数据库),主要感受有几点: 优势 nosql的无模式在修改和插入时很方便,不需要预先新建表或者修改表结构来新加字段,只需要代码里面使用就行 ...
- 老李推荐：第5章6节《MonkeyRunner源码剖析》Monkey原理分析-启动运行: 初始化事件源
老李推荐:第5章6节<MonkeyRunner源码剖析>Monkey原理分析-启动运行: 初始化事件源 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试 ...