2

私は2つのことを探しています。まず、AngularJs でウィザードを 10 ステップと統合したいと考えています。ng-ボイラープレートを使用しています。次に、プログレスバーをウィザードに統合したいと思います。すべてのステップで、プログレスバーが状態を更新する必要があります。

例えば：

1 ステップ -> プログレスバーの幅 10% 2 ステップ -> プログレスバーの幅 20%

等々...

誰かがこれを行うための良い解決策を知っていましたか、またはAngularjsですでにこれを行った人はいますか?

ご回答ありがとうございます

4

2 に答える 2

1

プログレスバーについては、 angularjs-bootstrap をお勧めします

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

ここに彼らのプランカーの編集があります

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

wizard.step モデルを 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>
于 2014-07-10T11:57:35.260 に答える
0

HTML5 にはプログレスタグがあります。IE > 9 でサポートされています。

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

$scope.step = 2;

フィドル

それ以外の場合は、ui-bootstrap のプログレスバー ディレクティブを使用できます。

于 2014-07-10T12:01:58.360 に答える