Create Order Form with Order Total in AngularJS

Last Reply 3 months ago By dharmendr

Posted 3 months ago

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>

 

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