是基于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. c++第一天

    今天完成的事情: [主线] 1.熟悉cpp文件的编译运行 2.初步认识输入输出 值得关注的地方是: 流的概念.endl除了结束当前行外,还有刷新缓冲区的功能.以及对 输入输出运算符(<< ...

  2. Dev Express 动态生成XRTable使用总结

    1. XRTableCell常见属性  XRTableCell xrTableCell = new XRTableCell(); A. 字体及字体大小 xrTableCell.Font = new S ...

  3. Linq常用语法详细

    1.简单的linq语法 //1 var ss = from r in db.Am_recProScheme select r; //2 var ss1 = db.Am_recProScheme; // ...

  4. WebStorm和sublime上使用git连接github(转)

    WebStorm使用git连接github的方法: 用webstorm上传代码时,首先要先下载git,网址一搜就可以搜到,安装git,并且把ssh配置到github上.然后开始配置webstorm,打 ...

  5. Mysql 拼接字段查询语句和join查询拼接和时间查询

    个人平时记录的,有点乱 1.修改时间字段,如果时间字段的类型是date或者是datetime类型的 update 表名 set 时间字段 = DATE_FORMAT(NOW(),'%Y-%m-%d % ...

  6. 通过页面调用APP【H5与APP互通】

    现在H5和App原生的内容原来越互通,所涉及的业务也越来越复杂和融合,所以如何互相之间方便的调用才是王道. 场景1 比如用hybrid获取地理位置和短信信息,这当然需要框架封装好,比如利用框架的bri ...

  7. NFA引擎匹配原理

    1       为什么要了解引擎匹配原理 一个个音符杂乱无章的组合在一起,弹奏出的或许就是噪音,同样的音符经过作曲家的手,就可以谱出非常动听的乐曲,一个演奏者同样可以照着乐谱奏出动听的乐曲,但他/她或 ...

  8. 编译GCC4.8.2

        公司的机器上默认是GCC4.4.6,为了完整的体验C++11,可以自己编译一个GCC4.8.2出来(自带了更高版本的glibc). 以下是备忘. 1.下载GCC源码以及依赖库 gmp ftp: ...

  9. CentOS6下基于Nginx搭建mp4/flv流媒体服务器(可随意拖动)并支持RTMP/HLS协议(含转码工具)

    1.先添加几个RPM下载源 1.1)安装RPMforge的CentOS6源     [root@AY130611215205Z ~]# wget -c http://pkgs.repoforge.or ...

  10. logresolve - 解析Apache日志中的IP地址为主机名

    logresolve是一个解析Apache访问日志中IP地址的后处理程序. 为了使对名称服务器的影响降到最低,logresolve拥有极为自主的内部散列表缓存, 使每个IP值仅仅在第一次从日志文件中读 ...