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>
Comments 1