AngularJS引导程序进度条最大值更改

当progressbar中的“max”值更改时，progressbar将不会更新其相对进度

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

{{dynamic}/{{max}

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

$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;  };

$scope.random=function（）{
var other=数学地板（（数学随机（）*100）+100）；
var类型；
如果（值<25）{
类型=‘成功’；
}否则如果（值<50）{
类型='info'；
}否则如果（值<75）{
类型='警告'；
}否则{
类型=‘危险’；
}
$scope.showWarning=（类型=='danger'| |类型=='warning'）；
$scope.max=其他；
$scope.type=type；}；

我有一个丑陋的工作，但我想知道是否有一个更整洁的方式

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

{{dynamic}/{{max}

请参见此处的示例：

---

查看您的

示例.js

，进度条不会自动更新的原因是因为您的

$scope.dynamic=value被注释掉。取消注释，您的进度条似乎工作正常。另外，请记住
max
是进度的总值（默认值为100），因此我不确定您为什么希望它动态变化<代码>值

是应该更改的值

看看这篇文章的

example.js

---

编辑：根据OP的意见修复plnkr链接。

解决此问题的一种方法是在配置阶段通过装饰

进度条

和

条

指令。在装饰器内部，您需要通过添加一个观察者来观察属性

dynamicMax

，以及它的插值。观察者的回调必须更新以下独立变量：

[1]scope.max

参考文献：

[2]范围.百分比

参考文献：

---

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

用法

{{value}}/{{max}

请注意，有一个名为

dynamic max

的新属性。这是要在中观察以更改最大值的属性，如果希望具有动态最大值，请使用此属性而不是

max

。请注意，您需要指定一个插值（该值必须包装在

{{}}

中）

---

谢谢，这似乎是保持进度条清洁的最有效解决方案，尤其是在我将不止一次使用dynamic max的情况下。问题是我将它们用作“健康条”对于实际的实现，如果最大健康度增加，那么这些条开始做一些我提到的奇怪的事情。另外，你链接plnkr时犯了一个错误。

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