ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Display Bootstrap ProgressBar in HTML Table using Bootstrap UI in AngularJS<p>Hi&nbsp;rani,</p> <p>Using ui.bootstrap.progressbar i have created the example.</p> <p>for more details on&nbsp;ui.bootstrap.progressbar refer&nbsp;<a href="https://angular-ui.github.io/bootstrap/">https://angular-ui.github.io/bootstrap/</a>.</p> <p>Check this example. Now please take its reference and correct your code.</p> <p><strong><span style="text-decoration: underline;">HTML</span></strong></p> <div class="demo_block"> <pre class="brush: html">&lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head&gt; &lt;title&gt;Bootstrap Progress Percentage in AngularJS&lt;/title&gt; &lt;style type=&#34;text/css&#34;&gt; .progress { height: 1.5em !important; background-color: rgba(153, 153, 153, 1) !important; } .progress-bar { transition: width 1s ease-in-out !important; } &lt;/style&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular-animate.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular-sanitize.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js&#34;&gt;&lt;/script&gt; &lt;link rel=&#34;stylesheet&#34; type=&#34;text/css&#34; href=&#34;https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css&#34; /&gt; &lt;script type=&#34;text/javascript&#34;&gt; var app = angular.module(&#39;MyApp&#39;, [&#39;ngAnimate&#39;, &#39;ngSanitize&#39;, &#39;ui.bootstrap&#39;]); app.controller(&#39;MyController&#39;, function ($scope, $timeout) { $scope.Products = [{ Name: &#34;Gas&#34;, Liters: 5000, Remaining: 4000 }, { Name: &#34;Oil&#34;, Liters: 25000, Remaining: 5000 }, { Name: &#34;Fuel&#34;, Liters: 15000, Remaining: 10000 } ] for (var i = 0; i &lt; $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 &lt; 25) { type = &#39;danger&#39;; } else if (value &lt; 50) { type = &#39;warning&#39;; } else if (value &lt; 75) { type = &#39;info&#39;; } else { type = &#39;success&#39;; } $scope.Products[i].Percentage = value; $scope.Products[i].Type = type; } }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div ng-app=&#34;MyApp&#34; ng-controller=&#34;MyController&#34;&gt; &lt;table class=&#34;table table-responsive&#34;&gt; &lt;tr&gt; &lt;th&gt;Name&lt;/th&gt; &lt;th&gt;Liters&lt;/th&gt; &lt;th&gt;Remaining&lt;/th&gt; &lt;th&gt;Percentage&lt;/th&gt; &lt;/tr&gt; &lt;tr ng-repeat=&#34;product in Products&#34;&gt; &lt;td&gt;{{product.Name}}&lt;/td&gt; &lt;td&gt;{{product.Liters}}&lt;/td&gt; &lt;td&gt;{{product.Remaining}}&lt;/td&gt; &lt;td&gt;&lt;uib-progressbar animate=&#34;false&#34; value=&#34;product.Percentage&#34; type=&#34;{{product.Type}}&#34;&gt;&lt;b&gt;{{product.Percentage}}%&lt;/b&gt;&lt;/uib-progressbar&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre> </div> <p><a class="demo button orange btn btn-red">Demo</a></p>https://www.aspforums.net:443/Threads/186042/Display-Bootstrap-ProgressBar-in-HTML-Table-using-Bootstrap-UI-in-AngularJS/https://www.aspforums.net:443/Threads/186042/Display-Bootstrap-ProgressBar-in-HTML-Table-using-Bootstrap-UI-in-AngularJS/Mon, 15 Jul 2019 07:23:20 GMT