Question

我正在努力为筹款活动开发一个进步的酒吧。最小值是要进行的活动的值，最大值是它可以采取的最大资金。如果进度条的颜色在达到最小标记之前变为红色并且之后变为绿色，那将是最好的。

这就是我对进度条的想法 http://www.icondeposit.com/local--files/imageid:268/UI-Progress-Bars.jpg

这是我迄今取得的成就 https://www.dropbox.com/s/q4nn64bdu8cuzch/progress%20bar.tiff

这是我的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>

这是我的控制器代码：

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

最后，我在plunker中尝试了我的代码。但它在那里不起作用，即使我添加了ng-app和ng-controller。

真的很感激任何帮助。谢谢！

Answer 1

抱歉，我不能在这里给你一个答案，我重建了你的考试，这是你可能想要的草图。基本上你有这个想法，就是不要在控制器中访问dom，比如

  document.getElementById('id').value.

在控制器中。除了获得关注点的分离之外，它还会尝试划分dom树搜索不必要开销的元素。使用范围变量inseta使用像这样的ng-model绑定

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

无论如何这里是完整的例子，有些细节需要解决，因为我不知道你想要的所有逻辑。但这应该是让你走上正确的轨道。

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

Answer 2

假设您正在使用ui.bootstrap.progressbar指令，则可以使用2 bar指令创建进度条。一个用于达到您的活动值，另一个用于剩余的进度，这允许您单独设置它们的样式。

您可以看到有效的 plunk here ，但基本的HTML会变为：

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

然后在您的控制器中设置值（如果它是动态的，则为类型）。我们将根据您的示例通过ng-click指令调用函数，如下所示：

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

请注意，我在这里使用单位只是将音量转换为百分比（进度条的最大值为100，在您的示例中为200，因此每个百分点将为2个单位）。

如何使用angularjs设计具有阶段和可扩展输入的动态进度条？

2 个答案: