Angularjs 结合向导和进度条答案

【问题标题】：Angularjs combine Wizard with progressbarAngularjs 结合向导和进度条
【发布时间】：2014-07-10 11:44:25
【问题描述】：

我正在寻找两件事。首先，我想在 AngularJs 中集成一个带有 10 个步骤的向导。我正在使用 ng 样板。然后我想将进度条集成到向导中。对于每一步，进度条都应该更新他的状态。

例如：

1 Step -> 进度条宽度 10% 2 Step -> 进度条宽度 20%

等等……

有没有人知道一个很好的解决方案，或者是否有人已经在 angularjs 中做过这个。

非常感谢您的回答

【问题讨论】：

标签： javascript angularjs progress-bar wizard ngboilerplate

【解决方案1】：

对于进度条，我建议使用 angularjs-bootstrap

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

这是他们的 plunker 的编辑

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>

【讨论】：

【解决方案2】：

HTML5 有一个progress 标签。受 IE > 9 支持。所以你可以

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

$scope.step = 2;

Fiddle

否则你可以使用 ui-bootstrap 的进度条指令。

【讨论】：