Hello Reader's if you want to build light process that update the shopping cart then you can see how to make the code.
Lets start with the html page for shoping cart
<form ng-app ng-controller="OrderFormController">
<h1>Services</h1>
<ul>
<li ng-repeat="service in services" ng-click="toggleActive(service)" ng-class="{active:service.active}">
{{service.name}} <span>{{service.price | currency}}</span>
</li>
</ul>
<div class="total">
Total: <span>{{total() | currency}}</span>
</div>
</form>
Now build the Javascript for the calculations and fetching records
function OrderFormController($scope){
$scope.services = [
{
name: 'NODE Tutorial',
price: 500,
active:true
},{
name: 'BPO',
price: 20,
active:false
},{
name: 'Testing',
price: 78,
active:false
},{
name: 'Training',
price: 220,
active:false
}
];
$scope.toggleActive = function(s){
s.active = !s.active;
};
$scope.total = function(){
var total = 0;
angular.forEach($scope.services, function(s){
if (s.active){
total+= s.price;
}
});
return total;
};
}
Now this script will load the dummy data like BPO, Testing etc. They will be shown with their price tag. If user select one it will change it's color to green and price will add to final checkout and if he again click on it then it will turn red and price will decrease from final payment. So you can easily attach this code in your website also.
0 Comment(s)