Question

您好我正在使用角度进度条，我想在每次单击按钮时更新。

<div ng-controller="ProgressDemoCtrl">
  <br/>
  <h3>
    Dynamic
    <button class="btn btn-sm btn-primary" ng-click="random()" type="button">Randomize</button>
  </h3>
  <small>
    <em>No animation</em>
  </small>
  <progressbar animate="false" type="success" value="dynamic">
    <b>{{dynamic}}%</b>
  </progressbar>
</div>

角

var ProgressDemoCtrl = function ($scope) {

  $scope.max = 00;

  $scope.random = function() {
    var value = Math.floor((Math.random() * 100) + 1);
    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.dynamic = value;
    $scope.type = type;
  };
  $scope.random();

  $scope.randomStacked = function() {
    $scope.stacked = [];
    var types = ['success', 'info', 'warning', 'danger'];

    for (var i = 0, n = Math.floor((Math.random() * 4) + 1); i < n; i++) {
        var index = Math.floor((Math.random() * 4));
        $scope.stacked.push({
          value: Math.floor((Math.random() * 30) + 1),
          type: types[index]
        });
    }
  };
  $scope.randomStacked();
};

正如你在这里看到的，当我点击按钮随机填充它时它会做什么。所以我想要做的是能够点击一个按钮并更新进度条。

Answer 1

如果您使用的是angular bootstrap's progressbar，这非常简单。我刚刚为它做了一个plunkr。

您的HTML

<div ng-controller="ProgressDemoCtrl">

    <h3>Progress bar value is {{dynamic}}</h3>
     <progressbar max="max" value="dynamic">
       <span style="color:black; white-space:nowrap;">
         {{dynamic}} / {{max}}
      </span>
    </progressbar>
    <input type="button" ng-click="progress()" value="Click Me To Progress" />
</div>
  </body>
</html>

和JS

angular.module('plunker', ['ui.bootstrap']);
var ProgressDemoCtrl = function ($scope) {

  $scope.dynamic = 10;
  $scope.max = 100;

  $scope.progress = function(){
    $scope.dynamic = $scope.dynamic + 10;
  };
};

如何在每次单击时更新角度进度条

1 个答案: