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.
Creo que la mejor solución es usar la barra de progreso Angle -UI en lugar de reinventar la rueda https://angular-ui.github.io/bootstrap/#/progressbar .
<uib-progressbar value="50"></uib-progressbar>
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 + "%");
})
}
};
});