网站建设资讯

NEWS

网站建设资讯

利用Angular怎么实现一个进度条功能

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

创新互联建站是一家集网站建设,海勃湾企业网站建设,海勃湾品牌网站建设,网站定制,海勃湾网站建设报价,网络营销,网络优化,海勃湾网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

HTML部分:


 
  {{vm.value}}%
 

选项

0% 20% 60% 100%

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怎么实现一个进度条功能
分享URL:http://njwzjz.com/article/pgeipi.html

其他资讯