How to design a dynamic progress bar with stages and scalable input with angularjs?

问题

I am trying to develop a progressive bar for fund raising activities. The minimum value is the value for the activity to take place and the maximum value is the max fund it can take. It will be the best if the color of progressive bar to be red before it reaches minimum marker and it turns into green afterwards.

This is what I have in mind for progress bar http://www.icondeposit.com/local--files/imageid:268/UI-Progress-Bars.jpg

This is what I have achieved so far https://www.dropbox.com/s/q4nn64bdu8cuzch/progress%20bar.tiff

Here is the code of my html

<div ng-controller="ProgressDemoCtrl">
    <h3>Dynamic </h3>
    <progressbar max="max" value="dynamic"><span style="color:black; white-space:nowrap;">{{dynamic}} / \
{{max}}</span></progressbar>
<!--scalable input -->
<div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" id="crd_volume">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button" ng-click="update()">Confirm the volume</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div>

And here is my code for controller:

var ProgressDemoCtrl = function ($scope) {

  $scope.max = 200;
  $scope.min = 100;
  var value=0;
  var max_volume=$scope.max
  var volume=1;

  $scope.update=function(){
  volume=document.getElementById("crd_volume").value;
  alert(volume);

  if (((value+parseFloat(volume))<max_volume)||((value+parseFloat(volume))==max_volume))
      {
          value =parseFloat(value)+parseFloat(volume);
       }
    $scope.dynamic = value;
    $scope.type = type;
  }

Lastly, I tried my code in plunker. But it does not work there, even though I added a ng-app and ng-controller.

Really appreciate any help. Thanks!

回答1:

With the assumption you are using the ui.bootstrap.progressbar directive, you can create a progress bar out of 2 bar directives. One to reach your activity value and another for the remainder of the progress, this allows you to style them separately.

You can see a working plunk here but the basic HTML becomes:

<progress>
    <bar value="bar1.value" type="{{bar1.type}}"></bar>
    <bar value="bar2.value" type="{{bar2.type}}"></bar>
</progress>

<input ng-model="volume">
<button ng-click="confirmVolume()">Confirm</button>

Then in your controller set the values (and the type if it is dynamic). We will do this calling a function via the ng-click directive as per your example as below:

$scope.confirmVolume = function () {
    var units = $scope.bar2.max / 100;
    $scope.bar1.value = $scope.volume < 100 ? $scope.volume/units : 100/units;
    $scope.bar2.value = $scope.volume > 100 ? ($scope.volume - 100)/units : 0;
};

Note that I have used units here simply to convert the volume into a percentage (the max value of the progress bar is 100, in your example it is 200, hence each percentage point would be 2 units).

回答2:

Sorry i don't give you an answer here just this link, i rebuilt your examle and this is a sketch of what you might want. basically you had the idea just don't access dom in controllers doing things like

  document.getElementById('id').value.

in the controller. besides being gains separation of concerns it will try to parce the dom tree searching for the element which is an unnecessary overhead. use scope variables inseta using ng-model binding like this

  <input type="text" class="form-control" id="crd_volume" ng-model="volume">

anyway here is the full exmaple, some details need to be addressed since i don't know all the logic you want t put in place. but this should be enought to get you on the right track.

http://plnkr.co/edit/Nch1UYO6Et6HNfXm0Qhd?p=preview

来源：https://stackoverflow.com/questions/24544108/how-to-design-a-dynamic-progress-bar-with-stages-and-scalable-input-with-angular