Display Bootstrap ProgressBar in HTML Table using Bootstrap UI in AngularJS

Last Reply one month ago By dharmendr

Posted one month ago

How to display the percentage in bootstrap progress bar.

Implement progress percentage in angularjs

You are viewing reply posted by: dharmendr one month ago.
Posted one month ago Modified on one month ago

Hi rani,

Using ui.bootstrap.progressbar i have created the example.

for more details on ui.bootstrap.progressbar refer https://angular-ui.github.io/bootstrap/.

Check this example. Now please take its reference and correct your code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Bootstrap Progress Percentage in AngularJS</title>
    <style type="text/css">
        .progress
        {
            height: 1.5em !important;
            background-color: rgba(153, 153, 153, 1) !important;
        }
        .progress-bar
        {
            transition: width 1s ease-in-out !important;
        }
    </style>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular-animate.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular-sanitize.js"></script>
    <script type="text/javascript" src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
    <link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript">
        var app = angular.module('MyApp', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
        app.controller('MyController', function ($scope, $timeout) {
            $scope.Products = [{ Name: "Gas", Liters: 5000, Remaining: 4000 },
                                { Name: "Oil", Liters: 25000, Remaining: 5000 },
                                { Name: "Fuel", Liters: 15000, Remaining: 10000 }
                              ]
            for (var i = 0; i < $scope.Products.length; i++) {
                var value = Math.round(parseInt(100) - ((parseInt($scope.Products[i].Remaining) / parseInt($scope.Products[i].Liters)) * parseInt(100))); ;
                var type;
                if (value < 25) {
                    type = 'danger';
                } else if (value < 50) {
                    type = 'warning';
                } else if (value < 75) {
                    type = 'info';
                } else {
                    type = 'success';
                }
                $scope.Products[i].Percentage = value;
                $scope.Products[i].Type = type;
            }
        });
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        <table class="table table-responsive">
            <tr>
                <th>Name</th>
                <th>Liters</th>
                <th>Remaining</th>
                <th>Percentage</th>
            </tr>
            <tr ng-repeat="product in Products">
                <td>{{product.Name}}</td>
                <td>{{product.Liters}}</td>
                <td>{{product.Remaining}}</td>
                <td><uib-progressbar animate="false" value="product.Percentage" type="{{product.Type}}"><b>{{product.Percentage}}%</b></uib-progressbar></td>
            </tr>
        </table>
    </div>
</body>
</html>

Demo