当前位置: 首页 > 面试题库 >

从angularjs更改引导进度条宽度

傅朗
2023-03-14
问题内容

我是Angularjs的新手,并且我尝试在控制器中的值更改时更新进度条的宽度。

我有类似的东西:

<span id="percentage">$ {{getTotal()}} ({{getPercentage()}}%)</span>
<div class="progress-bar progress-bar-warning" 
  role="progressbar" aria-valuenow="10" aria-valuemin="0" 
  aria-valuemax="100" style="width: 10%">
    <span class="sr-only">10% Complete (warning)</span>
</div>

我的控制器中有类似以下内容的内容:

$scope.total = 254.78;
$scope.threshold = 15000;

$scope.getPercentage = function () {
    return (($scope.total * 100) / $scope.threshold).toFixed(2);
}
$scope.getTotal = function () {
    return $scope.total;
}

如何更新进度条的宽度值?

谢谢,阿尔贝托。


问题答案:

ng-style指令可以解决问题。

<span id="percentage">$ {{getTotal()}} ({{getPercentage()}}%)</span>
<div class="progress-bar progress-bar-warning" 
  role="progressbar" aria-valuenow="{{getPercentage()}}" aria-valuemin="0" 
  aria-valuemax="100" ng-style="{width : ( getPercentage() + '%' ) }">
    <span class="sr-only">{{getPercentage()}}% Complete (warning)</span>
</div>


 类似资料:
  • 大多数情况下,我在寻找一个不用重写引导的解决方案。 附加的jsfiddle。第二个输入选项。没有经常使用jsfiddle,所以不知道,但尝试增加输出框的大小来查看结果,在更小的屏幕上甚至看不到。http://jsfiddle.net/rqx8t/

  • 我的kivy应用程序中有一个ProgressBar。我相信我需要使用,以确保从循环内部更新进度条。 以下代码是用于再现性目的的淡化版本。 ProgressBar类 主要类别: KV文件 此示例显示loading_pb.value按钮单击后代码循环时发生的变化。 进步吧。价值印刷输出 问题进度条的值似乎确实如预期的那样递增,但实际进度条直到循环结束时才立即改变。 相关的 无法更新kivy进度条 ki

  • 我正在通过企业分发开发和分发iPad应用程序。他们下载并执行得很好,所以一切都正常(网络链接、ipa文件、plist文件、供应…)。 “问题”是当用户点击链接下载时,iPad中显示下载进度的进度条上写着“等待…”,但是空的,从不改变。当它完成时,它变为“安装…”,然后它正确地显示安装进度。 对于小型应用程序,这并不是真正的问题,但对于大型应用程序,它会让用户认为什么都没有发生。 有没有办法显示下载

  • 如何更改iframe上的宽度和高度是src链接?使用下面的javascript代码,我可以更改iframe的宽度和高度,但当有这样的iframe时 如何更改此处的宽度和高度

  • 问题内容: 该和不改变自己的价值,方法结束时才。 问题答案: 您正在阻止事件分发线程,这将阻止它更新UI。您可以使用,但Swing是单线程API,这意味着只能从事件分配线程的上下文中对UI进行更新。 您可以使用,这将允许您在后台线程中执行长时间运行的过程,但是它支持将更新安全地同步到UI。 加之其与支持,就很容易进行管理,例如。 “进度窗格” 您可以在EDT中使用/ 支持和更新EDT,支持或工作人

  • 如前所述(如何在Android系统中制作圆形自定义进度条在我的项目中使用https://github.com/Todd-Davies/ProgressWheel库。我正在开发具有不同级别集的游戏应用程序。我使用圆形进度条作为计时器。一旦用户获得高分,我想改变旋转速度。 请检查这里的图像示例。(如何创建圆形进度条(饼图)像指示器-Android)。我没有得到正确的解决方案来固定时间限制以及使用进度条