如何将引导进度条重置为 0%答案

【问题标题】：how to reset bootstrap progress bar to 0%如何将引导进度条重置为 0%
【发布时间】：2014-07-30 03:23:36
【问题描述】：

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

custom.css

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

当我想将此进度条设置为零时出现问题（播放应用程序以查看此操作）。即使通过角度数据绑定将宽度设置为零，引导进度条也不会回到 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 也不会反映这些变化。有没有办法解决这个问题？

【问题讨论】：

标签： javascript angularjs twitter-bootstrap

【解决方案1】：

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

See this plunker 我已经演示了如何更改进度条的值。通过单击下面的每个 value 按钮，触发更改进度条值的 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>

【讨论】：

【解决方案2】：

您需要使用ng-style 有条件地应用内联 CSS。我创建了一个 plunkr 来演示如何将它与宽度一起使用。

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

<body ng-app="" ng-init="myStyle={width: '100px'}">
  <input ng-model="myStyle.width">
  <br/>
  <span style="background: red; display: block" ng-style="myStyle">Sample Text</span>
  <pre>myStyle={{myStyle}}</pre>
</body>

【讨论】：