本文實(shí)例講述了Angular實(shí)現(xiàn)的進(jìn)度條功能。分享給大家供大家參考，具體如下：

項(xiàng)目里需要一個(gè)進(jìn)度條，所以就在網(wǎng)上查找資料學(xué)習(xí)，看到了網(wǎng)友“雪狼”的代碼分享，寫的很高明，很精練，很厲害，原文中的代碼如下：

HTML部分：

<div ng-class="{progress: true, 'progress-striped': vm.striped}"> <div ng-class="['progress-bar', vm.style]" ng-style="{width: vm.value + '%'}">  <div ng-if="vm.showLabel">{{vm.value}}%</div> </div></div><h3>選項(xiàng)</h3><label>進(jìn)度：<input type="number" class="form-control" ng-model="vm.value"/></label><button class="btn btn-primary" ng-click="vm.value=0">0%</button><button class="btn btn-primary" ng-click="vm.value=20">20%</button><button class="btn btn-primary" ng-click="vm.value=60">60%</button><button class="btn btn-primary" ng-click="vm.value=100">100%</button><hr/><label>斑馬紋<input type="checkbox" ng-model="vm.striped"/></label><label>文字<input type="checkbox" ng-model="vm.showLabel"/></label><hr/><label>風(fēng)格： <select ng-model="vm.style" class="form-control">  <option value="progress-bar-success">progress-bar-success</option>  <option value="progress-bar-info">progress-bar-info</option>  <option value="progress-bar-danger">progress-bar-danger</option>  <option value="progress-bar-warning">progress-bar-warning</option> </select></label>

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;});

這里結(jié)合自己的項(xiàng)目需要，自己改編了個(gè)簡(jiǎn)單的進(jìn)度條，可以加在項(xiàng)目里面，進(jìn)度條的開(kāi)始和結(jié)束由自己決定。

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代碼

<div ng-class="{progress: true, 'progress-striped': vm.striped}" class="col-md-4">   <div ng-class="['progress-bar', vm.style]" ng-style="{width: vm.value + '%'}">      <div ng-if="vm.showLabel">{{vm.value}}%</div>   </div></div><button class="btn btn-success" ng-click="count()">開(kāi)始進(jìn)度</button>