本文實(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è)簡單的進(jìn)度條，可以加在項(xiàng)目里面，進(jìn)度條的開始和結(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()">開始進(jìn)度</button>更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對大家AngularJS程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
