从 angularjs 更改引导进度条宽度答案

【问题标题】：Change bootstrap progress-bar width from angularjs从 angularjs 更改引导进度条宽度
【发布时间】：2014-01-18 14:58:24
【问题描述】：

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

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

谢谢，阿尔贝托。

【问题讨论】：

标签： javascript html css angularjs twitter-bootstrap

【解决方案1】：

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>

【讨论】：

【解决方案2】：

好吧，你应该这样做：

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

【讨论】：

【解决方案3】：

你可以写自定义ng-style:

 <div class="progress-bar progress-bar-warning"
    role="progressbar" 
    aria-valuenow="10"
    aria-valuemin="0"
    aria-valuemax="100" 
    ng-style="percentageStyle">
        <span class="sr-only">10% Complete (warning)</span>
 </div>

在控制器中：

 $scope.percentageStyle = {
   width : $scope.getPercentage() + '%'     
 };

演示Fiddle

【讨论】：

【解决方案4】：

我会为此使用一个指令，它自己负责计算宽度。

module.directive("progressbar", function () {
    return {
        restrict: "A",
        scope: {
            total: "=",
            current: "="
        },
        link: function (scope, element) {

            scope.$watch("current", function (value) {
                element.css("width", scope.current / scope.total * 100 + "%");
            });
            scope.$watch("total", function (value) {
                element.css("width", scope.current / scope.total * 100 + "%");
            })
        }
    };
});

http://jsfiddle.net/rGWUR/10/

【讨论】：

【解决方案5】：

我认为更好的解决方案是使用 Angle -UI 进度条，而不是尝试重新发明轮子https://angular-ui.github.io/bootstrap/#/progressbar。

<uib-progressbar value="50"></uib-progressbar>

【讨论】：