是基于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. linux 基础知识

    一.命令的基本用法 (1).Linux里面的命令分为内置命令和独立的命令. (2).命令行的基本使用方法            Cli Syntax                    #命令和选项 ...

  2. 菜鸟学自动化测试(一)---- selenium IDE

    http://www.cnblogs.com/fnng/archive/2011/10/23/2222157.html

  3. Address already in use: JVM_Bind:8080 的解决办法<转>

    出错情况:运行 Tomcat 时报错 含义:8080 位置显示的端口被其他进程占用 解决方法: 方法1: 开始--运行--cmd 进入命令提示符 输入netstat -ano 即可看到所有连接的PID ...

  4. nodejs&npm等概念梳理

    nodejs node node版本 npm nvmw\gnvm等多版本管理 CommonJS.AMD.requirejs grunt.gulp package.json .npmrc npm\nod ...

  5. 数字图像处理作业使用OpenCV - 配置

    使用环境:Windows7 旗舰版 + vs2008 + OpenCV2.0a 基本上配置都是通过网上一个教程,在此附上地址 Click ME. 为了避免因不同版本而出现的安装问题,我还是下载了2.0 ...

  6. 引用类型(object、array)

    1.Object类型 1)创建方法: //使用new加object构造函数 var person = new Object(); person.name = "aaa"; pers ...

  7. CSS创造三角形的原理

    其实就是利用了div各方向border的接驳点产生的斜线的特点,知道原理后就不觉得有多不可思议了.. .triangle_up { height: 0px; width: 0px; border-bo ...

  8. ArcGIS GDB 文件中的lock文件影响复制

    复制或压缩gdb文件的时候,经常碰到有lock文件,解决方法是: 在catalog中停止相应的地图服务 如果用catalog预览过相应的地图,关闭catalog

  9. 再战江湖。vuforia 初试

    AR 里发现一个可用的项目  vuforia,  试着用用. 也是在很久不写博客后(以前全在百度博客上) 再次写

  10. FTP多任务下载实现类

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...