Question

我正在进行一项心理锻炼型游戏（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也不会反映这些变化。有办法解决这个问题吗？

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>

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

如何将bootstrap进度条重置为0％

2 个答案: