如何将引导进度条添加到角度倒计时计时器

how to add bootstrap progress bar to angular countdown timer

本文关键字：添加 倒计时 计时器      更新时间：2023-09-26

我想添加引导进度条到角度倒计时计时器。这是我的app.js 

function AlbumCtrl($scope,$timeout) {
    $scope.counter = 100;
    $scope.onTimeout = function(){
        $scope.counter--;
        mytimeout = $timeout($scope.onTimeout,1000);
    }
    var mytimeout = $timeout($scope.onTimeout,1000);
    $scope.stop = function(){
        $timeout.cancel(mytimeout);
    }
}

这取决于你使用的是哪个版本的bootstrap

Angular UI Bootstrap 

<div ng-controller="AlbumCtrl">
    <progressbar value="counter"></progressbar>
</div>

Boortstrap 3 

<div ng-controller="AlbumCtrl">    
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="{{counter}}" aria-valuemin="0" aria-valuemax="100" ng-style="{width:counter+'%'}">
            <span class="sr-only">{{counter}}% Complete</span>
        </div>
    </div>
</div>

你可以使用bootstrap UI内置指令:https://angular-ui.github.io/bootstrap/#/progressbar

这是一个基于你的代码plunkr: http://plnkr.co/edit/jC1GLH6Nfo6oQqq5um40?p=preview

html: 

<div ng-controller="ProgressCtrl">
    <h3>Static</h3>
    <div class="row">
        <div class="col-sm-4"><progressbar value="counter"></progressbar></div>
    </div>
</div>
相关文章：