是基于ion.rangeSlider.js,主要代码如下:

<link rel="stylesheet" type="text/css" href="/css/slider/normalize.css"/>
<link rel="stylesheet" type="text/css" href="/css/slider/ion.rangeSlider.css"/>
<link rel="stylesheet" type="text/css" href="/css/slider/ion.rangeSlider.skinModern.css"/>

<script type="text/javascript" src="/lib/angular.js"></script>
<script type="text/javascript" src="/lib/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="/lib/ion.rangeSlider.js"></script>
<script type="text/javascript" src="/lib/ng-underscore.js"></script>

<script>
    var rangeSliderApp = angular.module('rangeSliderApp',["ngUnderscore"]);

rangeSliderApp.directive('yearShaft', ["underscore",function(underscore){
        return{
            restrict: "A",
            scope: {
                years: "=",
                selectedyear:"="
            },
            link: function (scope,element) {

var years = underscore.sortBy(scope.years);
                var length = years.length;
                var max = years[length-1];
                var min = years[0];
                var initYears = function (years) {
                    if(years.length==1){
                        var year = new Date().getFullYear();
                        if(years[0] == year){
                            max = years[0];
                            min = years[0] - 1;
                            length = 2;
                        }else if(years[0] < year){
                            max = year;
                            min = years[0];
                            length = max - min +1;
                        }
                    }
                    return years;
                };
                initYears(scope.years);

$(element).ionRangeSlider({
                    hide_min_max: true,
                    prettify_enabled:false,
                    keyboard: true,
                    type:"single",
                    grid:true,
                    step:1,
                    grid_num:length - 1,
                    max:max,
                    min:min,
                    from_fixed:true,
                    from:scope.selectedyear
               });
           }
      }
}]);
</script>

AngularJS时间轴指令的更多相关文章

  1. angularjs时间轴

    1.炫酷的图片是开端啊 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ...

  2. AngularJS中的指令全面解析(转载)

    说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJ ...

  3. 使用Angularjs的ng-cloak指令避免页面乱码

    在使用Anguarjs进行web开发或者进行SPA(single page application)开发时,往往会遇到下面这样的问题. 刷新页面时,页面会出现一些乱码,这里的乱码具体是指`{{expr ...

  4. 带你走近AngularJS - 创建自定义指令

    带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...

  5. angularJS之使用指令封装DOM操作

    angularJS之使用指令封装DOM操作 创建指令 指令也是一种服务,只是这种服务的定义有几个特殊要求: 必须使用模块的directive()方法注册服务 必须以对象工厂/factory()方法定义 ...

  6. AngularJS创建新指令 - 基本功能

    指令(Directives)是所有AngularJS应用最重要的部分.尽管AngularJS已经提供了非常丰富的指令,但还是经常需要创建应用特定的指令. AngularJS原有的指令 ng-init  ...

  7. iOS之TimeLine(时间轴)的实现

    这是一个关于OC时间轴的简单实现,我认为重要的是思路. 感谢作者:Cyandev 的文章<iOS 实现时间线列表效果>给的思路.这里先附上Objective-C的代码实现,有时间再去试试S ...

  8. 08. Web大前端时代之:HTML5+CSS3入门系列 ~ QQ空间时间轴

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 大前端系列,主要就是使用CSS3.0来实现,注释我已经打 ...

  9. [原创]首次制作JQueryUI插件-Timeline时间轴

    特点: 1. 支持多左右滚动,左右拖动. 2. 时间轴可上下两种显示方式. 3. 支持两种模式的平滑滚动/拖动. 4. 行压缩(后续版本此处可设置是否开启,上传的代码不带这个功能). 5. 支持hov ...

随机推荐

  1. sql 查看某用户的连接数 以及 如何删除该用户的会话

    --查看不同用户的连接数 select TERMINAL from v$session where username='username' and machine='machine' ---查询用户会 ...

  2. session、cookie

    session:全局变量组 存放位置:存放在服务器上 用法:相当于一个变量的使用方法,存在于服务器内存上,抓取速度快 主界面: using System; using System.Collectio ...

  3. CSRF token 无法被验证. ----Yii连接数据库后数据库错误日志报错

    CSRF token 无法被验证. 我使用的是mongodb+ yii1.1 What is CSRF, please see the details here.  http://en.wikiped ...

  4. js判断中文

    var reg = /^[\u4E00-\u9FA5]+$/;if(!reg.test(keywordscn)){ alert('请填写中文') return false;}

  5. linux 记录用户操作记录日志

    ####################################################################################historyUSER_IP=$ ...

  6. swift_枚举 | 可为空类型 | 枚举关联值 | 枚举递归 | 树的概念

    ***************可为空的类型 var demo2 :we_demo = nil 上面这个代码串的语法是错的 为什么呢, 在Swift中,所有的类型定义出来的属性的默认值都不可以是nil ...

  7. Ridit分析

    对于有序分类资料,由于指标存在等级顺序,因此不能使用卡方检验,除了使用秩和检验之外,ridit检验也是分析有序分类资料的常用方法,属于非参数检验. ridit检验的基本做法是将一组有序分组资料转换成一 ...

  8. ubuntu-kylin16.04搭建lamp环境。

    首先下载安装apache2 输入:sudo apt-get install apache2 安装完毕后,在浏览器中输入:localhost 显示如下图,说明安装正确. 紧接着安装php7.0 输入:s ...

  9. 从PDF中提取信息----PDFMiner

    今天由于某种原因需要将pdf中的文本提取出来,就去搜了下资料,发现PDFMiner是针对 内容提取的,虽然最后发现pdf里面的文本全都是图片,就没整成功,不过试了个文本可复制的 那种pdf文件,发现还 ...

  10. BIEE 10g 二次开发整理

    近半年在公司做某个项目的时候,主要使用到了Oracle BIEE 10g这套工具.刚开始的时候,对OBIEE是七窍通了六窍,还是一窍不通. 现在已经摸索出些许门道,特整理出来:一来,备忘:二来,供大家 ...