本篇文章主要介绍了angularjs实现时间轴效果的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
一 引入包
引入angular-timeline包。
下载地址：angular-timeline.zip
在index.html中引入
登录后复制
app.js中引用，不引用就没有效果。
二 改写css
根据需求改写css,核心部分的改写。
可以写在style.css中，也可以新建一个css文件，但是一定要在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;}
登录后复制
三 页面
准备工作做完了，下面是页面的编写。
{{event.hour}}{{item.customerName}}
{{item.reserveNumber}}人
登录后复制
//controllerangular.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" }] } ]; } });
登录后复制
四 效果图
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
使用JS如何实现去除重复json
使用js+cookie如何实现购物车功能
在jQuery中如何使用Validate插件
使用axios如何实现上传图片带有进度条功能
以上就是在angularjs中如何实现时间轴的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2748943.html
