Create Order Form with Order Total in AngularJS

Last Reply 21 days ago By dharmendr

Posted 21 days 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 21 days 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