Ti Duu
Ti Duu

Reputation: 35

Angularjs combine Wizard with progressbar

i'm searching for two things. First i want to integrate a Wizard with 10 Steps in AngularJs. I'm using ng-boilerplate. Then i want to integrate a progressbar into the wizard. For every step the progressbar should update his state.

For example:

1 Step -> Progressbar width 10% 2 Step -> Progressbar width 20%

and so on...

Did anyone know a good solution for doing this or did anyone already done this in angularjs.

Thanks a lot for your answers

Upvotes: 2

Views: 3865

Answers (2)

gorpacrate
gorpacrate

Reputation: 5571

HTML5 has a progress tag. Supported by IE > 9. So you can

<progress value="{{step*10}}" max="100"></progress>

$scope.step = 2;

Fiddle

Otherwise you can take ui-bootstrap's progressbar directive.

Upvotes: 0

maurycy
maurycy

Reputation: 8465

For a progress bar i'd suggest angularjs-bootstrap

http://angular-ui.github.io/bootstrap/#/progressbar

here is edit of their plunker

http://plnkr.co/edit/JNdarF9OUHcK3eRQlhCQ?p=preview

use the wizard.step model as progressbar.value

<div class="row">
        <div class="col-sm-4"><progressbar value="wizard.step" max="10"></progressbar></div>
        <div class="col-sm-4"><progressbar class="progress-striped" max="10" value="wizard.step" type="warning">{{myProgress*10}}%</progressbar></div>
        <div class="col-sm-4"><progressbar class="progress-striped active" max="10" value="wizard.step" type="danger"><i>{{myProgress}} / 10</i></progressbar></div>
    </div>

Upvotes: 1

Related Questions