var app = angular.module('MainApp', []);
app.controller('shopController', function($scope) {
$scope.invoice = {
items: [{
qty: 10,
description: 'item',
cost: 9.95
}]
};
$scope.addItem = function() {
$scope.invoice.items.push({
qty: 1,
description: '',
cost: 0
});
};
$scope.deleteItem = function(index) {
$scope.invoice.items.splice(index, 1);
};
$scope.subTotal = function(item) {
return item.qty * item.cost;
};
$scope.total = function() {
var total = 0;
angular.forEach($scope.invoice.items, function(item) {
total += item.qty * item.cost;
});
return total;
}
});
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.3/angular.min.js'></script> <script src="app.js"></script>
</head>
<body ng-app='MainApp'>
<h2>Shopping Cart Example</h2>
<div ng-controller='shopController'>
<table class=".table-striped">
<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>{{subTotal(item) | currency}}</td>
<td><button ng-click="deleteItem()" class="btn btn-small">delete item</button></td>
</tr>
<tr>
<td><button ng-click="addItem()" class="btn btn-small">add item</button>
</td>
<td></td>
<td>Total:</td>
<td>{{total() | currency}}</td>
</tr>
</table>
</div>
</body>
</html>
/* Put your css in here */