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

【问题标题】：how to add bootstrap progress bar to angular countdown timer如何将引导进度条添加到角度倒计时计时器
【发布时间】：2015-09-17 12:27:56
【问题描述】：

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

【问题讨论】：

那么，你的问题是什么？
标题中的问题很清楚，但是@chetan 也许您可以解释一下您的尝试？

标签： javascript angularjs twitter-bootstrap

【解决方案1】：

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

Angular UI 引导

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

Bortstrap 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>

【讨论】：

当我设置 $scope.counter = 600;进度条不起作用。任何帮助，因为我想增加我的计数器超过 100
您需要定义一个范围。如果您使用 angular-ui，您可以使用最大属性 max=600 设置它，例如常规引导程序有 aria-valuemax="600"
我自己第一次尝试就这样做了，但它不起作用
您的 plunkr 中缺少这个：ng-style="{width:counter/600*100+'%'}"
非常感谢，感谢您的帮助。它正在工作:)

【解决方案2】：

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

【讨论】：