微客导航 » 文章资讯 » Angular实现的进度条功能示例

Angular实现的进度条功能示例

2023-09-16 08:20:05 289

本文实例讲述了Angular实现的进度条功能。分享给大家供大家参考，具体如下：

项目里需要一个进度条，所以就在网上查找资料学习，看到了网友“雪狼”的代码分享，写的很高明，很精练，很厉害，原文中的代码如下：

HTML部分：



{{vm.value}}%

选项

进度：

0% 20% 60% 100%

斑马纹文字

风格：

progress-bar-success progress-bar-info progress-bar-danger progress-bar-warning

JS部分：

'usestrict';
angular.module('ngShowcaseApp').controller('ctrl.show.progress',function($scope){
varvm=$scope.vm={};
vm.value=50;
vm.style='progress-bar-info';
vm.showLabel=true;
});

这里结合自己的项目需要，自己改编了个简单的进度条，可以加在项目里面，进度条的开始和结束由自己决定。

1.js代码

varmyApp=angular.module('myApp',[]);
myApp.controller('main',['$scope','$interval',function($scope,$interval){
varvm=$scope.vm={};
vm.value=0;
vm.style='progress-bar-danger';
vm.showLabel=true;
vm.striped=true;
$scope.selectValue=function(){
console.log(vm.style);
};
varindex=0;
vartimeId=500;
$scope.count=function(){
varstart=$interval(function(){
vm.value=++index;
if(index>99){
$interval.cancel(start);
}
if(index==60){
index=99;
}
},timeId);
};
}]);

2.html代码



{{vm.value}}%

开始进度

更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJSMVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

返回顶部
3162201930
czq8825@qq.com

Angular实现的进度条功能示例

选项

热门推荐

随机推荐