Angularjs가 마법사와 진행 막대를 결합합니다.

Question

두 가지를 찾고 있습니다. 먼저 AngularJs의 10 단계 마법사를 통합하고 싶습니다. 나는 상용구를 사용하고있다. 그런 다음 진행률 표시 줄을 마법사에 통합하려고합니다. 모든 단계마다 진행 상황 표시 줄이 그의 상태를 업데이트해야합니다. 예를 들어

:

1 단계 -> ProgressBar의 10 %를 2 단계 폭 ->의 ProgressBar는 20 %

등등 ...

가

사람이 수행하기위한 좋은 해결책을 알고 계십니까 폭 이것은 또는 이미 angularjs에서 이것을 한 사람이었습니다.

주셔서 감사합니다 답변 난 좋을 것 진행률 표시 줄에 대한

Answer 1

에 대한 많은 AngularJS와 부트 스트랩

여기

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

자신의 plunker

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

사용의 편집이다 마법사. 단계 모델은 진행률 막대입니다. 값

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

Answer 2

HTML5의 태그는 progress입니다. IE> 9. 지원 그래서 당신은

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

$scope.step = 2; 

Fiddle

그렇지 않으면 당신은 UI-부트 스트랩의 ProgressBar 구성 지시를 취할 수 있습니다.