Home • Programming • Angular Jul 21st, 2016 at 07:00 PM

Add to cart using AngularJS

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script   src="https://code.jquery.com/jquery-3.1.0.min.js"   integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="   crossorigin="anonymous"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>

<body>
<div ng-app="myApp" ng-controller="myCtrl">

<button data-id="78" data-name="pen" data-price="34" ng-click="add($event)">Add</button>
<button data-id="79" data-name="Mum" data-price="100" ng-click="add($event)">Add</button>

<div id="cart"></div>
<div>Total: {{total}}</div>


</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
	
	$scope.total=0;
	//$scope.cart=[];
	
	$scope.add=function(e){
		
		var id=$(e.target).data("id");
		var name=$(e.target).data("name");
		var price=$(e.target).data("price");
		
		//$scope.cart.push({'id':id,'name':name,'price':price,'qty':1});
		$scope.total+=price;
		
		var html="<div>";
		html+="ID: "+id+" Name: "+name+" Price:"+price;
		html+="</div>";
		
		$("#cart").append(html);
		
    }
	
    
});
</script>

</body>
</html>

Add to cart using AngularJS

Comments 1

Share