AngularJS Bootstrap进度条最大变化

当进度条中的“max”值改变时，进度条不会更新其相对进度。AngularJS Bootstrap进度条最大变化

<progressbar max="max" value="dynamic"><span style="color:black; white-space:nowrap;">{{dynamic}}/{{max}}</span></progressbar>

通过使用一种方法来随机化的最大值

$scope.random = function() { 
var other = Math.floor((Math.random() * 100) + 100); 
var type; 

if (value < 25) { 
    type = 'success'; 
} else if (value < 50) { 
    type = 'info'; 
} else if (value < 75) { 
    type = 'warning'; 
} else { 
    type = 'danger'; 
} 

$scope.showWarning = (type === 'danger' || type === 'warning'); 
$scope.max = other; 
$scope.type = type; };

我有一个丑陋的解决办法，但我想知道是否有更合适的方法

<progressbar value="dynamic/max*100"><span style="color:black; white-space:nowrap;">{{dynamic}}/{{max}}</span></progressbar>

见例在这里： http://plnkr.co/edit/urZH8i2sJUeeTgIJ7JWU?p=preview

来源

2014-08-27 Meredori

的一种方法是在配置阶段来装饰经由$provide.decorate()的progressbar和bar指令。在装饰者内部，您需要通过attr.$observe()添加观察者以观察属性，并使用其内插值观察属性dynamicMax。对于观察者回调必须更新以下分离的变量：

[] scope.max

参考文献：

https://github.com/angular-ui/bootstrap/blob/master/src/progressbar/progressbar.js#L13

[] 范围。％的

参考：

https://github.com/angular-ui/bootstrap/blob/master/src/progressbar/progressbar.js#L23 https://github.com/angular-ui/bootstrap/blob/master/src/progressbar/progressbar.js#L61 https://github.com/angular-ui/bootstrap/blob/master/src/progressbar/progressbar.js#L78 https://github.com/angular-ui/bootstrap/blob/master/template/progressbar/progressbar.html

PLUNKER DEMO

JAVASCRIPT

.config(function($provide) { 

    var progressDecorator = function($delegate) { 
     var directive = $delegate[0]; 
     var compile = directive.compile; 
     var link = directive.link; 

     directive.compile = function() { 
     compile.apply(this, arguments); 

     return function(scope, elem, attr, ctrl) { 
      link.apply(this, arguments); 

      if(angular.isDefined(attr.dynamicMax)) { 
      attr.$observe('dynamicMax', function(max) { 
       scope.max = max; 
       scope.percent = +(100 * scope.value/max).toFixed(2); 
      }); 
      } 

     }; 
     }; 

     return $delegate; 
    }; 

    $provide.decorator('progressbarDirective', progressDecorator); 
    $provide.decorator('barDirective', progressDecorator); 
    });

HTML

使用

<progressbar dynamic-max="{{max}}" value="value"> 
    <span style="color:black; white-space:nowrap;">{{value}}/{{max}}</span> 
</progressbar>

注意，有一个叫dynamic-max新的属性。这是在观察中更改最大值的属性，如果要具有动态最大值，则使用此属性代替max。注意，你需要指定一个插值（价值必须被包裹在一个{{}}。

DECORATING DIRECTIVES REFERENCE

来源

2014-08-27 17:49:54 ryeballar

谢谢，这似乎是最有效的解决方案，以保持进度栏清洁，特别是在我将不止一次使用dynamic-max的情况下。 – Meredori 2014-08-28 02:53:29

看着你example.js，进度条不会自动更新的原因是因为您的$scope.dynamic = value;已注释掉。取消注释它，你的进度条似乎工作正常。另外，请记住，max是总计进度的值（默认为100），所以我不确定为什么您希望它会动态更改; value是应该改变的。

看看这个demo的example.js。

编辑：根据OP的评论修复plnkr链接。解决这个问题

来源

2014-08-27 16:58:49

的问题是，我使用他们作为“健康网吧”的实际执行情况等如果最大健康状况增加，酒吧开始做一些奇怪的事情，我谈到了。此外，你犯了一个错误连接plnkr。 – Meredori 2014-08-28 02:54:26

AngularJS Bootstrap进度条最大变化

回答

相关问题