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 发出广播回传图片路径,和调用者充分解耦合 根据传入参数支持裁剪和 ...
随机推荐
- YIi2 Pjax简单使用
1.点击事件需要在Pjax::begin() 和Pjax::end()范围内 2.需要在链接配置数组后加上 ['data-pjax'=>'#testPjax'] 其中,'#testPjax‘是 ...
- Java的内存机制详解
Java把内存分为两种:一种是栈内存,另一种是堆内存.在函数中定义的一些基本类型的变量和对象的引用变量都是在函数的栈内存中分配,当在一段代码块定义一个变量时,Java 就在栈中为这个变量分配内存空间, ...
- Linux下快速搭建php开发环境
php开发环境快速搭建 一.Linux下快速搭建php开发环境 1.安装XAMPP for Linux XAMPP(Apache+MySQL+PHP+PERL)是一个功能强大的建站集成软件包,使用XA ...
- ABC: Always Be Coding
ABC: Always Be Coding (原地址:https://medium.com/@davidbyttow/abc-always-be-coding-d5f8051afce2) Be h ...
- block、块级作用域
block:语句块 (或其他语言中的 复合语句) 用来组织零个或多条语句. 包含在{ }里面 通常在流程控制语句 (如 if, for, while)中使用 块级作用域:通过var声明的变量没有块级作 ...
- Java Swing客户端小项目
记录一下两个用java swing写的客户端. 项目1: 关键词:swing jtable 代码如下: 1.主类: package com.my.agent.client; import java. ...
- shell 并发多进程同时执行
#!/bin/bash SEND_THREAD_NUM= #设置进程数. tmp_fifofile="/tmp/$$.fifo" # 脚本运行的当前进程ID号作为文件名 mkfif ...
- ReentrantLock源码分析与理解
在上面一篇分析ThreadExecutedPool的文章中我们看到线程池实现源码中大量使用了ReentrantLock锁,那么ReentrantLock锁的优势是什么?它又是怎么实现的呢? Reent ...
- win7下nsis打包exe安装程序教程
下载软件包: NSIS中文版 :https://pan.baidu.com/s/1mitSQU0 装好之后会出现两个软件:Nullsoft Install System 和 VNISEdit 编译环境 ...
- 老李分享：大数据测试中java和hadoop关系
Hadoop的创始人是Doug Cutting, 同时也是著名的基于Java的检索引擎库Apache Lucene的创始人.Hadoop本来是用于著名的开源搜索引擎Apache Nutch,而Nutc ...