Question

我想将 bootstrap进度条添加到角度倒数计时器。这是我的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);
    }
}

Answer 1

你可以使用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>

Answer 2

取决于您使用的引导程序版本。

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>

如何将自举进度条添加到角度倒数计时器

2 个答案: