javascript - 如何将 Bootstrap 进度条重置为 0%

Question

我正在开发一款心理锻炼类型的游戏 ( add1.herokuapp.com )，并且玩家的剩余时间有时间限制。我想使用bootstrap进度条来实现这个效果，我基本上通过覆盖bootstrap CSS中的transition-duration属性来实现这个效果

自定义.css

.progress-bar {
  -webkit-transition: width 5s linear;
       -o-transition: width 5s linear;
          transition: width 5s linear;
}

当我想将此进度条设置回零(播放应用程序以查看其实际情况)时，问题就出现了。即使通过 Angular 数据绑定(bind)将宽度设置为零， Bootstrap 进度条也不会返回到 0%。

game.html

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="{{progressNum}}" aria-valuemin="0" aria-valuemax="100" style="width: {{progressNum}}%;">
    <span class="sr-only">{{progressNum}}% Complete</span>
  </div>
</div>

game.js

//When I call setTimer, I call this
$scope.progressNum = 100;

//When I want to reset for the next problem, I call this
$scope.progressNum = 0;

我的猜测是，即使 ProgressNum 正在变化，bootstrap 也不会反射(reflect)这些变化。有办法解决这个问题吗？

Answer 1

您可以使用angular-ui's bootstrap 进度条指令，它具有控制进度条的当前值、最大值甚至颜色所需的功能。

<强> See this plunker 我已经演示了如何更改进度条的值。通过单击下面的每个值按钮，触发 ng-click 处理程序来更改进度条的值。

**JAVASCRIPT:**

  .controller('Ctrl', function($scope) {
    $scope.progress = {
      value: 50,
      max: 100,
      color: 'warning'
    };

    $scope.changeValue = function(value) {
      $scope.progress.value = value;
    };

  });

HTML

<div progressbar 
    class="progress-striped active" 
    max="progress.max" 
    value="progress.value" 
    type="{{progress.color}}">

    <i>{{progress.value}}/{{progress.max}}</i>

</div>

<strong>Value: </strong><br>
<div class="btn btn-default" ng-click="changeValue(0)">0/100</div>
<div class="btn btn-default" ng-click="changeValue(25)">25/100</div>
<div class="btn btn-default" ng-click="changeValue(50)">50/100</div>
<div class="btn btn-default" ng-click="changeValue(75)">75/100</div>
<div class="btn btn-default" ng-click="changeValue(100)">100/100</div>