Display percentage progress bar in HTML Table Row in AngularJS

Last Reply 5 months ago By dharmendr

Posted 5 months ago

How to implement it in each row of table to display the percentage in angularjs.

Display percentage from Database in Bootstrap progress bar using jQuery in ASP.Net FormView

Posted 5 months ago

Hi rani,

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

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', []);
        app.controller('MyController', function ($scope) {
            $scope.Products = [
            { Name: "Gas", Liters: 5000, Remaining: 4000 },
            { Name: "Oil", Liters: 25000, Remaining: 18000 },
            { Name: "Fuel", Liters: 15000, Remaining: 13000 }
            ];
            for (var i = 0; i < $scope.Products.length; i++) {
                $scope.Products[i].Percentage = Math.round(parseInt(100) - ((parseInt($scope.Products[i].Remaining) / parseInt($scope.Products[i].Liters)) * parseInt(100)));
            }
        });
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        <table border="1" cellpadding="1" cellspacing="1">
            <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 style="width: 200px;">
                    <div ng-style="{'width' : '100%','background-color':'#E9E9E9' }">
                        <div ng-style="{'width' : product.Percentage+'%','background-color':'#337AB7','text-align': 'center' }">
                            <span style="color: White;">{{product.Percentage}}%</span>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

Demo