How to implement timeline in angularjs

This article mainly introduces the sample code of angularjs to achieve the timeline effect. The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let’s follow the editor and take a look.

1. Introduce the package

Introduce the angular-timeline package.

Download address: angular-timeline.zip

Introduce

<link href="lib/angular-timeline/dist/angular-timeline.css" rel="external nofollow" rel="stylesheet">
<script src="lib/angular-timeline/dist/angular-timeline.js"></script>

in index.html and quote it in app.js. If you don’t quote it, it will have no effect. .

2 Rewrite css

Rewrite css according to needs, rewrite the core part.

can be written in style.css, or you can create a new css file, but it must be quoted in index.html.

/* 时间轴 */
.timeline-event {
 margin-bottom: 0px !important;
}

timeline-badge.infos {
 background-color: #47d09e !important;
}

.timeline:before {
 width: 1px !important;
 left: 24px !important;
 margin-top: 30px !important;
 background-color: #47d09e !important;
}

timeline-badge {
 left: 16px !important;
 width: 15px !important;
 height: 15px !important;
 top: 15px !important;
 box-shadow: none !important;
}

timeline-panel {
 float: left !important;
 width: 85% !important;
 padding: 13px 0px 6px 0px !important;
 margin-left: 39px !important;
 background: none !important;
 border: none !important;
 box-shadow: none !important;
}

timeline-panel:before {
 visibility: hidden !important;
}

timeline-panel:after {
 visibility: hidden !important;
 display: none !important;
}

timeline-panel .time {
 font-size: 14px;
 font-family: 'PingFangSC-Regular';
}

timeline-panel .detail {
 display: flex;
 display: -webkit-flex;
 align-items: center;
 -webkit-align-items: center;
 justify-content: space-between;
 -webkit-justify-content: space-between;
 margin-top: 10px;
}

timeline-panel .detail .linename {
 font-size: 16px;
 max-width: 80%;
 color: #1c1c1c;
 display: inline-block;
 font-family: 'PingFangSC-Medium';
}

timeline-panel .detail .linelevel {
 position: absolute;
 right: 18%;
 border-radius: 4px;
 color: white;
 padding: 1px 5px 1px 5px;
 font-size: 11px;
}

timeline-panel .detail .linelevel-g {
 background-color: #f27373;
}

timeline-panel .detail .linelevel-p {
 background-color: #e29431;
}

timeline-panel .detail .linenum {
 float: right;
 font-size: 14px;
 color: #323232;
}

Three pages

The preparation work is done, the following is the preparation of the page.

<!--html页面-->
<ion-view view-title="{{title}}">
 <ion-content scroll="true">

  <timeline>
   <timeline-event ng-repeat="event in teamDataList" side="right">
    <timeline-badge class="infos">
    </timeline-badge>
    <timeline-panel class="infos">
       <span class="time">
        {{event.hour}}
       </span>
     <p class="detail" ng-repeat="item in event.data">
      <span class="linename">{{item.customerName}}</span>
      <p style="float: right;">
         <span class="linenum">
         {{item.reserveNumber}}人
         </span>
      </p>

     </p>
    </timeline-panel>
   </timeline-event>
  </timeline>

 </ion-content>
</ion-view>

//controller
angular.module('studyApp.controllers')

 .controller('TimeLineCtrl', function ($scope, $rootScope, $location) {
  $scope.title = '时间轴';

  makeData();

  function makeData() {
   $scope.teamDataList=[

    {
     hour:"12:00",
     data:[
      {
       customerName:"中国国旅（江苏）国际旅行社有限公司",
       reserveNumber:"12",
       id:"aaaabbb12112"
      },
      {
       customerName:"江苏2",
       reserveNumber:"122",
       id:"aaaabbb12112"
      }
     ]
    },
    {
     hour:"13:00",
     data:[{
      customerName:"江苏2",
      reserveNumber:"112",
      id:"aaaabbb12112"
     }]

    },
    {
     hour:"14:00",
     data:[{
      customerName:"江苏3",
      reserveNumber:"12",
      id:"aaaabbb12112"
     }]

    },
    {
     hour:"13:00",
     data:[{
      customerName:"江苏2",
      reserveNumber:"112",
      id:"aaaabbb12112"
     }]

    },
    {
     hour:"14:00",
     data:[{
      customerName:"江苏3",
      reserveNumber:"12",
      id:"aaaabbb12112"
     }]

    }
   ];

  }

 });

Four renderings

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to use JS to remove duplicate json

##How to use js cookie to implement the shopping cart function

How to use the Validate plug-in in jQuery

How to use axios to upload images with a progress bar function

The above is the detailed content of How to implement timeline in angularjs. For more information, please follow other related articles on the PHP Chinese website!