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

【问题标题】：How to design a dynamic progress bar with stages and scalable input with angularjs?如何使用 angularjs 设计具有阶段和可扩展输入的动态进度条？
【发布时间】：2014-08-24 00:15:59
【问题描述】：

我正在尝试为筹款活动开发一个渐进式标准。最小值是活动发生的价值，最大值是它可以采取的最大资金。进度条的颜色最好在到达最小标记之前为红色，之后变为绿色。

这就是我对进度条的想法 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。

非常感谢任何帮助。谢谢！

【问题讨论】：

这里是 plunker 的链接：plnkr.co/edit/dhBvWBIXDzZdnGBxPOSQ?p=preview
您的 plunk 不起作用有几个原因，但最重要的是您一开始没有包含 Angular。为了将来对 Plunker 的参考，您可以从新按钮下拉列表中选择一个角度项目，它将为您提供一些基本的样板。我还假设您正在使用angular-ui 进度条指令，我将根据这个假设在下面制定一个答案。

标签： javascript html css angularjs angular-ui-bootstrap

【解决方案1】：

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

您可以看到一个正常工作的 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 个单位）。

【讨论】：

【解决方案2】：

对不起，我没有在这里给你答案只是这个链接，我重建了你的例子，这是你可能想要的草图。基本上你有这样的想法，只是不要在控制器中访问 dom 做类似的事情

  document.getElementById('id').value.

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

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

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

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

【讨论】：