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
