时间:2021-07-01 10:21:17 帮助过:18人阅读
一 准备工作
1.引用文件
下面链接中有一个jquery.js文件,请在index.html中引用。
2.新建文件
新建一个js文件,编写指令。这也是我第一次写指令,指令可扩展性强,还很方便,当项目中重复使用的一些效果时可以通过指令来减少冗余的代码。
二 代码编写
/** * Created by xiehan on 2017/12/8. * 柱状图动态加载指令 */ angular.module('studyApp.directives') .directive('progressPer', function ($compile,$timeout) { return { restrict: 'AE', scope: { progressData: '=' }, template: ' <p class="progress-main" ng-repeat="item in progressData">'+ '<p class="progress-data">'+ '<span>{{item.name}}</span>'+ '<p class="skillbar clearfix " data-percent={{item.width}}>'+ '<p class="skillbar-bar"></p>'+ '<p class="skill-bar-percent">{{item.sum}}</p>'+ '</p>'+ '</p>'+ '<p class="progress-rate">{{item.percent}}</p>'+ '</p>', replace: true, transclude: true, link: function (scope, element, attrs) { $compile(element.contents())(scope.$new()); $timeout(function() { jQuery('.skillbar').each(function(){ jQuery(this).find('.skillbar-bar').animate({ width:jQuery(this).attr('data-percent') },1000); }); }); } } });
/** * Created by xiehan on 2017/11/29. * controller文件 */ angular.module('studyApp.controllers') .controller('ProgressCtrl', function ($scope, $rootScope, $ionicHistory,$timeout,$location) { $scope.title = '进度条效果'; $scope.goBack = function () { $ionicHistory.goBack(); }; var dataInfo=[ { NAME:"测试1", NUM:30, RATE:30 }, { NAME:"测试2", NUM:25, RATE:25 }, { NAME:"测试3", NUM:45, RATE:45 } ]; handleTabData(dataInfo); function handleTabData(data){ var widthData=[]; for(var i = 0;i<data.length;i++){ widthData.push({ width:data[i].RATE+'%', //进度条百分比 name:data[i].NAME, //标题 sum:data[i].NUM, //数量 percent:data[i].RATE+'%'}); //百分比 } $scope.handleDataInfo = widthData; //不使用指令加上下面的代码 // $timeout(function() { // jQuery('.skillbar').each(function(){ // jQuery(this).find('.skillbar-bar').animate({ // width:jQuery(this).attr('data-percent') // },1000); // }); // }); } });
<ion-item>不使用指令</ion-item> <p class="progress-main" ng-repeat="item in handleDataInfo"> <p class="progress-data"> <span>{{item.name}}</span> <p class="skillbar clearfix " data-percent={{item.width}}> <p class="skillbar-bar"></p> <p class="skill-bar-percent">{{item.sum}}</p> </p> </p> <p class="progress-rate">{{item.percent}}</p> </p> <ion-item>使用指令</ion-item> <progress-per progress-data="handleDataInfo"></progress-per>
/***************进度条样式css********/ .skillbar { position: relative; display: block; margin-bottom: 15px; width: 100%; background: #eee; /**背景颜色**/ height: 35px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -webkit-transition: 0.4s linear; -moz-transition: 0.4s linear; -ms-transition: 0.4s linear; -o-transition: 0.4s linear; transition: 0.4s linear; -webkit-transition-property: width, background-color; -moz-transition-property: width, background-color; -ms-transition-property: width, background-color; -o-transition-property: width, background-color; transition-property: width, background-color; } .skillbar-bar { height: 35px; width: 0px; background: #50d2c2; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } .skill-bar-percent { position: absolute; right: 10px; top: 0; font-size: 11px; height: 35px; line-height: 35px; color: #ffffff; color: rgba(0, 0, 0, 0.4); } .progress-main{ display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: center; -webkit-justify-content: center; margin-top: 10px; } .progress-data{ margin-left: 5%; width: 100%; float: left; } .progress-rate{ float: right; width: 20%; line-height: 35px; margin-left: 5%; margin-top: 10px; }
三 效果图
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
使用Vue如何实现集成Iframe页面
在vue中如何渲染函数render(详细教程)
详细解读vue中的mixin
有关JS希尔排序算法(详细教程)
以上就是在angularjs中如何实现柱状图动态加载的详细内容,更多请关注Gxl网其它相关文章!