是基于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. 关于HTML5音频——audio标签和Web Audio API各平台浏览器的支持情况

    对比audio标签 和 Web Audio API 各平台浏览器的支持情况:   audio element Web Audio API desktop browsers Chrome 14 Yes  ...

  2. CSS3中的伪类选择器详解

      类选择器和伪类选择器区别 类选择器我们可以随意起名,而伪类选择器是CSS中已经定义好的选择器,不可以随意起名. 伪类选择器以及伪元素 我们把它放到这里 p.aaas{ text-align: le ...

  3. [教程] [承風雅傳HSU]用ES4封裝Win7---ES4 Win7封裝教程(未完待續)

    [教程] [承風雅傳HSU]用ES4封裝Win7---ES4 Win7封裝教程(未完待續) a10036it 发表于 2015-7-27 21:11:19 https://www.itsk.com/t ...

  4. TAP/TUN浅析(一)

    参考链接:https://www.ibm.com/developerworks/cn/linux/1310_xiawc_networkdevice/ TAP 设备与 VETH 设备     TUN/T ...

  5. 联想键盘 去掉fn

    这个帖子 很实用 http://iknow.lenovo.com/detail/dc_039949.html 键盘驱动下载地址:http://support1.lenovo.com.cn/lenovo ...

  6. centos 安装mongodb

    原文引用:http://blog.chinaunix.net/uid-24250828-id-3770298.html 官方网站: http://www.mongodb.org/ MongoDB 安裝 ...

  7. 反斜杠在JSP中的两种不同的含义

    / 在不同条件下的不同含义 / 代表WEB应用的根路径的情况:/ 交给 Servlet容器来处理 请求转发时: request.getRequestDispatcher("/xxxx&quo ...

  8. Linux 系统把英文修改成中文界面

    1.一般安装后的linux系统都是英文的界面,网上查了一下各种说法都有,我只做了如下的配置就好了,下载个中文包,改一下i18n就完事了,并没有那么复杂 下面上图文: 目前是英文的界面 2.下载个中文包 ...

  9. ueditor使用小结

    一.简介 ueditor是百度编辑器,官网地址:http://ueditor.baidu.com/website/ 完整的功能演示,可以参考:http://ueditor.baidu.com/webs ...

  10. tab切换-淘宝案例

    案例: html: <body> <div class="wrap" id="wrap"> <div class="no ...