Display Bootstrap ProgressBar in HTML Table using Bootstrap UI in AngularJS

Last Reply 3 months ago By dharmendr

Posted 3 months ago

How to display the percentage in bootstrap progress bar.

Implement progress percentage in angularjs

You are viewing reply posted by: dharmendr 3 months ago.
Posted 3 months ago Modified on 3 months 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