Angular实现的进度条功能示例
本文实例讲述了Angular实现的进度条功能。分享给大家供大家参考,具体如下:
项目里需要一个进度条,所以就在网上查找资料学习,看到了网友“雪狼”的代码分享,写的很高明,很精练,很厉害,原文中的代码如下:
HTML部分:
{{vm.value}}%
本文实例讲述了Angular实现的进度条功能。分享给大家供大家参考,具体如下:
项目里需要一个进度条,所以就在网上查找资料学习,看到了网友“雪狼”的代码分享,写的很高明,很精练,很厉害,原文中的代码如下:
HTML部分:
{{vm.value}}%
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程序设计有所帮助。