Display percentage progress bar in HTML Table Row in AngularJS

rani
 
on Jul 12, 2019 12:24 AM
Sample_875369.zip
3148 Views

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

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Jul 12, 2019 05:49 AM

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