Source Code

Shopping Cart with AngularJS Example

Create a Simple Shopping Cart using Angularjs

A Shopping Cart Application Built with AngularJS.Shopping Cart in angularjs and ecommerce example in angularjs in the Best way possible.

Description Qty Cost Total
{{item.qty * item.cost | currency}} [X]
Add item Total: {{total() | currency}}

Example : index.html


 <!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="calcApp">     
<div ng-controller="CartForm">
<table class="table">
	<tr>
		<th>Description</th>
		<th>Qty</th>
		<th>Cost</th>
		<th>Total</th>
		<th></th>
	</tr>
	<tr ng-repeat="item in invoice.items">
		<td><input type="text" ng-model="item.description" class="input-small"></td>           
		<td><input type="number" ng-model="item.qty" ng-required class="input-mini"></td>
		<td><input type="number" ng-model="item.cost" ng-required class="input-mini"></td>
		<td>{{item.qty * item.cost | currency}}</td>
		<td>
			[<a href ng-click="removeItem($index)">X</a>]
		</td>
	</tr>
	<tr>
		<td><a href ng-click="addItem()" class="btn btn-small">add item</a></td>
		<td></td>
		<td>Total:</td>
		<td>{{total() | currency}}</td>
	</tr>
</table>
</div>
</body>
</html>

Example : App.js


var calcApp = angular.module('calcApp', []);

calcApp.controller('CartForm', function ($scope) {
   $scope.invoice = {
        items: [{
            qty: 10,
            description: 'item',
            cost: 9.00}]
    };

    $scope.addItem = function() {
        $scope.invoice.items.push({
            qty: 1,
            description: '',
            cost: 0
        });
    },

    $scope.removeItem = function(index) {
        $scope.invoice.items.splice(index, 1);
    },

    $scope.total = function() {
        var total = 0;
        angular.forEach($scope.invoice.items, function(item) {
            total += item.qty * item.cost;
        })

        return total;
    }
});