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>
<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'},{'ap':'cpsh-oh'},{'server':'p3plzcpnl508605'},{'dcenter':'p3'},{'cp_id':'10178443'},{'cp_cl':'8'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/traffic-assets/js/tccl.min.js'></script></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;
    }
});