Angular实现的进度条功能示例

Angular实现的进度条功能示例

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

HTML部分：

进度：

0%

20%

60%

100%

斑马纹

文字

风格：

progress-bar-success

&lhttp://t;option value="progress-bar-info">progress-bar-info

progress-bar-danger

progress-bar-warning

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';

pULTtmGEi 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代码

开始进度

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

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。