0

I want to add bootstrap progress bar to angular countdown timer. Here is my 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);
    }
}
2
  • So, what is your problem? Commented Sep 17, 2015 at 12:28
  • 2
    The problem is pretty clear in the title but @chetan perhaps you can explain what you have tried? Commented Sep 17, 2015 at 12:30

2 Answers 2

3

Depends on what version of bootstrap you use.

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>
Sign up to request clarification or add additional context in comments.

6 Comments

when I set $scope.counter = 600; progress bar doesn't work. any help as i want to increase my counter beyond 100
You need to define a range. if you're using angular-ui you can set it with a max attribute max=600 for example the regular bootstrap has aria-valuemax="600"
i did this in first attempt iteself but it's not working
You are missing this in your plunkr: ng-style="{width:counter/600*100+'%'}"
thank you so much, i appreciate your help. it's working:)
|
2

you could use bootstrap ui built-in directive: https://angular-ui.github.io/bootstrap/#/progressbar

here is a plunkr based on your code: 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>

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.