Angularjs Time Axis

1, cool picture is the beginning Ah

2. Front-end HTML code

Div class= "Container-fluid row" >            <timelineaxis ng-show= "paramid>0" >                <timeaxis-item Ng-repeat= "Item in Items" >                    <a href= "#/taxrm/edit/{{item.versionid}}" ng-class= "{' Active ':p aramid== Item.versionid} ">                        <timeaxis-point></timeaxis-point>                        <timeaxis-panel>{{ item.content}}</timeaxis-panel>                    </a>                </timeaxis-item>            </timelineaxis>            <div class= "Timeaxis-hide" ng-show= "paramid>0" Timeaxis-hide ng-click= "Hide ()" ></div>        </div >

3, angular directive

var Taxapp = angular.module (' MyApp '); Taxapp.directive ("Timelineaxis", function () {return {restrict: ' AE ', transclude:true, template : ' <div class= "timeaxis-warpper" ><ul class= "TimeAxis" Ng-transclude></ul></div> '};}); Taxapp.directive ("Timeaxisitem", function () {return {require: ' ^timeaxis ', restrict: ' AE ', Tran Sclude:true, Template: ' <li ng-class-even= ' \ ' timeaxis-inverted\ ' "Ng-transclude ></li> '};});        Taxapp.directive ("Timeaxispoint", function () {return {require: ' ^timeaxisitem ', restrict: ' AE ', Transclude:true, Template: ' <div class= ' timeaxis-point ' ><span></span></div> '}; Taxapp.directive ("Timeaxispanel", function () {return {require: ' ^timeaxis ', restrict: ' AE ', tra Nsclude:true, Template: ' <div class= ' Timeaxis-panel "Ng-transclude></div> '};}); Taxapp.directive ("TimeaXishide ", function () {return {require: ' ^timeaxiswarpper ', restrict: ' AE ', transclude:true, Template: ' <span class= ' Glyphicon glyphicon-menu-up "></span>};});

4. Angular Controller

Angular.module (' MyApp '). Controller (' Taxrmedit ', function ($scope, $routeParams) {$scope. Paramid = $routeParams. id;if ($scope. Paramid > 0) {$scope. TimeAxis = function () {$scope. Items = [{versionid:10, Content: ' 2015.07.01~ '}, {versionid:9, CO Ntent: ' 2015.05.01~2015.07.01 '}, {versionid:8, content: ' 2014.12.01~2015.05.01 '}, {versionid:7, content: ' 2014.01.01        ~2014.12.01 '}, {versionid:6, content: ' 2013.10.01~2014.01.01 '}];       }; $scope. TimeAxis ();} $scope. Hide = function () {if (Angular.element ("Timelineaxis"). attr ("style") = = = = Undefined | | angular.element ("Tim Elineaxis "). attr (" style ")! =" Display:none; ")            {angular.element ("Timelineaxis"). Hide ();            Angular.element (". Timeaxis-hide>span"). Removeclass ("glyphicon-menu-up");        Angular.element (". Timeaxis-hide>span"). AddClass ("Glyphicon-menu-down");            } else {angular.element ("Timelineaxis"). Show (); Angular.element (". Timeaxis-hide>span").Removeclass ("Glyphicon-menu-down");        Angular.element (". Timeaxis-hide>span"). AddClass ("glyphicon-menu-up"); }    };});

5. Style sheet

/* Timeline main area settings */.timeaxis-warpper{overflow-x: auto;    Overflow-y: Hidden;    Display:block;    margin-right:15px;    padding-left:15px;    Overflow-x: auto;    Overflow-y: Hidden;}        /* Timeline Arrows set */. timeaxis-warpper:before {position:relative;        top:63px;        Left: -15px;        Display:inline-block;        BORDER-TOP:7PX solid Transparent;        border-left:0 solid #00ced1;        border-right:15px solid #00ced1;        BORDER-BOTTOM:7PX solid Transparent;    Content: "";    }.timeaxis{padding:0;    List-style:none;    height:100px;    position:relative;    width:100%;    Display:inline-flex;}        /* Time Axis set */. timeaxis:before {top:0;        bottom:0;        Position:absolute;        Content: "";        height:3px;        Background-color: #00ced1;        top:50%;    width:100%;    }/* Axis Point set */.timeaxis-point{width:8px;    height:8px;    top:48px;    margin-left:65px;    border-radius:4px; BORDER:1PX Solid #00ced1;    Background-color: #ffffff;    Background-repeat:no-repeat;    Position:absolute;}        . timeaxis-point span {color: #bab9c9;        font-size:10px;        padding:0;        margin:0;        position:relative;    Left: -5px;    }/* setting area */.timeaxis li{float:left;    width:140px; height:30px;}    A. timeaxis-panel{background-color: #fff;    Float:left;    top:5px;    border:1px solid #d4d4d4;    border-radius:2px;    width:100%;    height:100%;    position:relative;    padding:5px 5px;    -webkit-box-shadow:0 1px 5px rgba (0, 0, 0, 0.175);    box-shadow:0 1px 5px rgba (0, 0, 0, 0.175);}    A. Timeaxis-panel span {color: #333333;    }.timeaxis-panel:before{Position:absolute;    Bottom: -13px;    Top:auto;    left:57px;    Display:inline-block;    BORDER-TOP:13PX solid #ccc;    border-left:11px solid Transparent;    border-right:11px solid Transparent;    border-bottom:0px solid #ccc; Content: "";}. Timeaxis-panel:after{Position:absolute;    Bottom: -12px;    Top:auto;    left:58px;    border-top:12px solid #fff;    border-left:10px solid Transparent;    border-right:10px solid Transparent;    border-bottom:0px solid #fff; Content: "";}    A.active. Timeaxis-panel,a:focus. timeaxis-panel{border:1px solid #00ced1;    Background-color: #00ced1;}    A.active. Timeaxis-panel span, A:focus. Timeaxis-panel span {color: #ffffff;        } a.active. Timeaxis-panel:before, A:focus. timeaxis-panel:before {position:absolute;        Bottom: -13px;        Top:auto;        left:57px;        Display:inline-block;        BORDER-TOP:13PX solid #00ced1;        border-left:11px solid Transparent;        border-right:11px solid Transparent;        border-bottom:0px solid #00ced1;    Content: "";    }a.active. Timeaxis-panel:after,a:focus. timeaxis-panel:after{Position:absolute;    Bottom: -12px;    Top:auto;    left:58px;  border-top:12px solid #00ced1;  border-left:10px solid Transparent;    border-right:10px solid Transparent;    border-bottom:0px solid #00ced1; Content: "";}    A.active. timeaxis-point{width:8px;    height:8px;    top:48px;    margin-left:65px;    border-radius:4px;    border:2px solid #ffffff;    Background-color: #00ced1;    Background-repeat:no-repeat; Position:absolute;}.    timeaxis-inverted. timeaxis-panel{top:67px;}        . timeaxis-inverted. timeaxis-panel:before {position:absolute;        Bottom:auto;        Top: -12px;        left:57px;        Display:inline-block;        border-top:0px solid #ccc;        border-left:11px solid Transparent;        border-right:11px solid Transparent;        border-bottom:12px solid #ccc;    Content: "";        }. timeaxis-inverted. timeaxis-panel:after {position:absolute;        Bottom:auto;        Top: -11px;        left:58px;        border-top:0px solid #fff;        border-left:10px solid Transparent; border-right:10px solid Transparent;        border-bottom:11px solid #fff;    Content: "";        }. timeaxis-inverted a.active. Timeaxis-panel:before,. timeaxis-inverted A:focus. Timeaxis-panel:before {        Position:absolute;        Bottom:auto;        Top: -12px;        left:57px;        Display:inline-block;        border-top:0px solid #00ced1;        border-left:11px solid Transparent;        border-right:11px solid Transparent;        border-bottom:12px solid #00ced1;    Content: ""; }. timeaxis-inverted a.active. Timeaxis-panel:after,. timeaxis-inverted a:focus. timeaxis-panel:after {PO        Sition:absolute;        Bottom:auto;        Top: -11px;        left:58px;        Display:inline-block;        border-top:0px solid #00ced1;        border-left:10px solid Transparent;        border-right:10px solid Transparent;        border-bottom:11px solid #00ced1;    Content: "";        }. timeaxis-hide {width:100%; Padding-left:50%;        height:15px;        Background-color: #00ced1;        Color: #ffffff;        position:relative;    Display:inline-block; }

End of life!!!

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Angularjs Time Axis