项目里需要一个进度条，所以就在网上查找资料学习，本文就和大家分享一下angular实现进度条功能代码，希望能帮助到大家。
HTML部分：
{{vm.value}}%选项
Modoer多功能点评系统2.5 精华版 Build 20110710 UTF8
下载
Modoer 是一款以本地分享，多功能的点评网站管理系统。采用 PHP+MYSQL 开发设计，开放全部源代码。因具有非凡的访问速度和卓越的负载能力而深受国内外朋友的喜爱，不局限于商铺类点评，真正实现了多类型的点评，可以让您的网站点评任何事与物，同时增加产品模块，也更好的网站产品在网站上展示。Modoer点评系统 2.5 Build 20110710更新列表1.同步 旗舰版系统框架2.增加 限制图片
JS部分：
?
'use strict';
angular.module('ngShowcaseApp').controller('ctrl.show.progress', function ($scope) {
var vm = $scope.vm = {};
vm.value = 50;
vm.style = 'progress-bar-info';
vm.showLabel = true;
});
这里结合自己的项目需要，自己改编了个简单的进度条，可以加在项目里面，进度条的开始和结束由自己决定。
1. js代码
var myApp = angular.module('myApp', []);
myApp.controller('main', ['$scope', '$interval', function($scope, $interval){
var vm = $scope.vm = {};
vm.value = 0;
vm.style = 'progress-bar-danger';
vm.showLabel = true;
vm.striped = true;
$scope.selectValue = function (){
console.log(vm.style);
};
var index = 0;
var timeId = 500;
$scope.count = function(){
var start = $interval(function(){
vm.value = ++index;
if (index > 99) {
$interval.cancel(start);
}
if (index == 60) {
index = 99;
}
}, timeId);
};
}]);
2. html代码
{{vm.value}}%
更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
相关推荐：
