Display percentage progress bar in HTML Table Row in AngularJS

Last Reply 10 months ago By dharmendr

Posted 10 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

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