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.Create Order Form with Order Total in AngularJS<p>Hi&nbsp;rani,</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;Order Form AngularJS&lt;/title&gt; &lt;style type=&#34;text/css&#34;&gt; * { margin: 0; padding: 0; } body { text-align: center; } div { background-color: #FF0000; border-radius: 2px; box-shadow: 0 1px 1px #ccc; width: 300px; } div ul { list-style: none; text-align: left; } div ul li { background-color: #FFA6FF; margin-bottom: 2px; box-shadow: 0 1px 1px rgba(0,0,0,0.1); cursor: pointer; } div ul li span { float: right; } div ul li.active { background-color: #00F200; } div.total { font-size: 20px; font-weight: bold; color: #fff; width: 200px; } &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;&gt; var app = angular.module(&#39;MyApp&#39;, []); app.controller(&#39;MyController&#39;, function ($scope) { $scope.Products = [ { Id: 1, Name: &#39;Chai&#39;, Price: 18.00, Active: false }, { Id: 2, Name: &#39;Chang&#39;, Price: 19.00, Active: false }, { Id: 3, Name: &#39;Aniseed Syrup&#39;, Price: 10.00, Active: false }, { Id: 4, Name: &#39;Mishi Kobe Niku&#39;, Price: 97.00, Active: false }, { Id: 5, Name: &#39;Ikura&#39;, Price: 31.00, Active: false }, { Id: 6, Name: &#39;Queso Cabrales&#39;, Price: 21.00, Active: false }, { Id: 7, Name: &#39;Konbu&#39;, Price: 6.00, Active: false }, { Id: 8, Name: &#39;Tofu&#39;, Price: 23.25, Active: false }, { Id: 9, Name: &#39;Pavlova&#39;, Price: 17.45, Active: false } ]; $scope.ToggleActive = function (product) { product.Active = !product.Active; }; $scope.Total = function () { var total = 0; angular.forEach($scope.Products, function (product) { if (product.Active) { total += product.Price; } }); return total; }; }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;center&gt; &lt;div ng-app=&#34;MyApp&#34; ng-controller=&#34;MyController&#34;&gt; &lt;ul&gt; &lt;li ng-repeat=&#34;product in Products&#34; ng-click=&#34;ToggleActive(product)&#34; ng-class=&#34;{active:product.Active}&#34;&gt; {{product.Name}} &lt;span&gt;{{product.Price | currency}}&lt;/span&gt; &lt;/li&gt; &lt;/ul&gt; &lt;div class=&#34;total&#34;&gt; Total: &lt;span&gt;{{Total() | currency}}&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/center&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/381120/Create-Order-Form-with-Order-Total-in-AngularJS/https://www.aspforums.net:443/Threads/381120/Create-Order-Form-with-Order-Total-in-AngularJS/Wed, 31 Jul 2019 05:45:01 GMT