利用Angular怎么实现一个进度条功能
这篇文章给大家介绍利用Angular怎么实现一个进度条功能,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

创新互联建站是一家集网站建设,海勃湾企业网站建设,海勃湾品牌网站建设,网站定制,海勃湾网站建设报价,网络营销,网络优化,海勃湾网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。
HTML部分:
{{vm.value}}%选项
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}}%
关于利用Angular怎么实现一个进度条功能就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
本文标题:利用Angular怎么实现一个进度条功能
文章路径:http://www.jxjierui.cn/article/pgeipi.html


咨询
建站咨询
