tpls tabset ngbtypeahead ngbtooltip ngbcollapse ngb modal custom bootstrap javascript html css angularjs twitter-bootstrap

javascript - tabset - Cambia el ancho de la barra de progreso de bootstrap desde angularjs



ngbtypeahead (5)

Bueno, deberías hacer algo como esto:

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

Soy nuevo en Angularjs e intento actualizar el ancho de una barra de progreso cuando cambia un valor en mi controlador.

Tengo algo como:

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

Y tengo en mi control algo como:

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

¿Cómo actualizo el valor de ancho de la barra de progreso?

Gracias, Alberto.



La directiva de estilo ng haría el truco.

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


Puedes escribir un ng-style personalizado:

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

y en el controlador:

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

Demo Fiddle


Yo usaría una directiva para esto, que es responsable de calcular el ancho por sí mismo.

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/