从 angularjs 更改引导进度条宽度 [英] Change bootstrap progress-bar width from angularjs
本文介绍了从 angularjs 更改引导进度条宽度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我是 Angularjs 的新手,我正在尝试在控制器中的值发生变化时更新进度条的宽度.
我有类似的东西:
<span id="percentage">$ {{getTotal()}} ({{getPercentage()}}%)</span><div class="progress-bar progress-bar-warning"角色="进度条" aria-valuenow="10" aria-valuemin="0"aria-valuemax="100" 样式="宽度:10%"><span class="sr-only">10% 完成(警告)</span>
我的控制器中有类似的东西:
$scope.total = 254.78;$scope.threshold = 15000;$scope.getPercentage = 函数 () {返回 (($scope.total * 100)/$scope.threshold).toFixed(2);}$scope.getTotal = 函数 () {返回 $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(警告)</span>
I'm new in Angularjs and I am trying to update the width of a progress bar when a value in my controller change.
I have something like:
<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>
And I have in my controller something like:
$scope.total = 254.78;
$scope.threshold = 15000;
$scope.getPercentage = function () {
return (($scope.total * 100) / $scope.threshold).toFixed(2);
}
$scope.getTotal = function () {
return $scope.total;
}
How do I update the width value of the progress bar?
Thanks, Alberto.
解决方案
ng-style directive would do the trick.
<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>
这篇关于从 angularjs 更改引导进度条宽度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文