Display Bootstrap ProgressBar in HTML Table using Bootstrap UI in AngularJS

Last Reply one year ago By dharmendr

Posted one year ago

How to display the percentage in bootstrap progress bar.

Implement progress percentage in angularjs

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