Display percentage progress bar in HTML Table Row in AngularJS

Last Reply one month ago By dharmendr

Posted one month 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

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