Create Order Form with Order Total in AngularJS

rani
 
on Jul 31, 2019 12:19 AM
Sample_381120.zip
1576 Views

How to create an order form with total price on selection of product from list of products in angularjs.

When select product from list it should be changed the color of particular list and the total will be calculate.

Is i need to add check box for selection or i select on click?

<body ng-app="MyApp" ng-controller="MyController">
    <ul>
        <li ng-repeat="product in Products">
            {{product.name}} {{product.price | currency}}
        </li>
    </ul>
    <div class="total">
        Total: {{total() | currency}}
    </div>
</body>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Jul 31, 2019 05:45 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>
    <title>Order Form AngularJS</title>
    <style type="text/css">
        *
        {
            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;
        }
    </style>
    <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 = [
                    { Id: 1, Name: 'Chai', Price: 18.00, Active: false },
                    { Id: 2, Name: 'Chang', Price: 19.00, Active: false },
                    { Id: 3, Name: 'Aniseed Syrup', Price: 10.00, Active: false },
                    { Id: 4, Name: 'Mishi Kobe Niku', Price: 97.00, Active: false },
                    { Id: 5, Name: 'Ikura', Price: 31.00, Active: false },
                    { Id: 6, Name: 'Queso Cabrales', Price: 21.00, Active: false },
                    { Id: 7, Name: 'Konbu', Price: 6.00, Active: false },
                    { Id: 8, Name: 'Tofu', Price: 23.25, Active: false },
                    { Id: 9, Name: 'Pavlova', 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;
            };
        });
    </script>
</head>
<body>
    <center>
        <div ng-app="MyApp" ng-controller="MyController">
            <ul>
                <li ng-repeat="product in Products" ng-click="ToggleActive(product)" ng-class="{active:product.Active}">
                    {{product.Name}} <span>{{product.Price | currency}}</span> </li>
            </ul>
            <div class="total">
                Total: <span>{{Total() | currency}}</span>
            </div>
        </div>
    </center>
</body>
</html>

Demo