角时间进度条答案

【问题标题】：angular time progress bar角时间进度条
【发布时间】：2015-05-03 12:31:48
【问题描述】：

根据他们网页上的示例，我应该能够执行以下操作：

        <timer countdown="30" interval="1000">
        <div class="progress progress-striped active {{displayProgressActive}}" style="height: 30px;"> Remaining
            time : {{countdown}} second{{secondsS}} ({{progressBar}}%). Activity? {{displayProgressActive}}
            <div class="bar" style="min-width: 2em;width: {{progressBar}}%;"></div>
        </div>
    </timer>

但是时间正在正确运行，但进度条没有移动。所以显然displayProgress 不会触发。

谁能帮我解决这个问题？

【问题讨论】：

“根据他们网页上的示例..”。你应该更具体，你使用什么指令，什么网页。
此外，您的代码中没有任何 displayProgress 变量。顺便说一句，你能提供一个小提琴吗？
你应该使用ng-style而不是style
是的，很抱歉我提到了变量progressBar

标签： javascript angularjs angularjs-directive

【解决方案1】：

我从您的代码中了解到，displayProgressActive 包含您想要针对某些条件触发的 CSS 类的名称，要使用 AngularJS 以一种干净的方式执行此操作，请使用 ng-class 指令，如下例所示：

<div class="progress progress-striped active" ng-class="{'class-name': condition, 'class2-name: condition2}">....

因此，您只需使用您的代码制作ng-class="{'class-to-trigger': displayProgressActive}"

其中 displayProgressActive 是您从控制器管理的布尔值

【讨论】：

设置progressBar变量