如何将引导进度栏重置为0％

Question

I'm working on a mental exercise type game ( add1.herokuapp.com ) and there's a time limit for how long the player has left. 我正在开发一种智力锻炼类型的游戏（ add1.herokuapp.com ），并且该玩家还有多长时间没有时间限制。 I want to use the bootstrap progress bar to implement this, and I've basically achieved this effect by overriding the transition-duration property in the bootstrap CSS 我想使用bootstrap进度条来实现此目的，并且通过覆盖bootstrap CSS中的transition-duration属性，我基本上已经达到了这种效果。

custom.css custom.css

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

The problem comes when I want to set this progress bar back to zero (play the app to see this in action). 当我想将此进度栏设置回零时，问题就来了（播放应用程序以查看其运行情况）。 The bootstrap progress bar does not go back to 0%, even though the width is being set to zero through angular data binding. 即使通过角度数据绑定将宽度设置为零，引导进度条也不会回到0％。

game.html 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 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;

My guess is that even though the progressNum is changing, bootstrap does not reflect these changes. 我的猜测是，即使progressNum正在更改，引导程序也无法反映这些更改。 Is there a way to work around this? 有办法解决这个问题吗？

Answer 1

you can use angular-ui's bootstrap progressbar directive, it has the facilities you need to control your progress bar's current value, maximum value and even the color. 您可以使用angular-ui的bootstrap progressbar指令，它具有控制进度条的当前值，最大值甚至颜色所需的功能。

See this plunker I've made to demonstrate how to change the value of your progress bar. 请参阅我制作的这个小工具 ，以演示如何更改进度条的值。 By clicking each value button below, triggers the ng-click handler that changes the value of the progress bar. 通过单击下面的每个值按钮，将触发ng-click处理程序，该处理程序将更改进度栏的值。

**JAVASCRIPT: ** ** JAVASCRIPT：**

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

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

  });

HTML 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>

Answer 2

You need to use ng-style to apply inline CSS conditionally. 您需要使用ng-style有条件地应用内联CSS。 I've created a plunkr to demonstrate how to use it with width. 我创建了一个plunkr来演示如何将其与宽度一起使用。

http://plnkr.co/edit/t1UHAjjDHse7QBiKz64i?p=preview 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>

如何将引导进度栏重置为0％

问题描述

2 个解决方案

解决方案1
1 已采纳 2014-07-30 05:22:46

解决方案2
0 2014-07-30 03:31:47

如何将引导进度栏重置为0％

问题描述

2 个解决方案

解决方案1 1 已采纳 2014-07-30 05:22:46

解决方案2 0 2014-07-30 03:31:47

解决方案1
1 已采纳 2014-07-30 05:22:46

解决方案2
0 2014-07-30 03:31:47