Binding to an AngularJS Controller with simple table

by manoj

HTML

<div ng-app>
		<div ng-controller="ShoppingCartCtrl">
            <br />
			<table border="1">
				<thead>
					<tr>
						<td>Name</td>
						<td>Price</td>
						<td>Quantity</td>
                        <td>Remove Item</td>
					</tr>
				</thead>
				<tbody>
					<tr ng-repeat="item in items">
						<td>{{item.Name}}</td>
						<td>{{item.Price}}</td>
						<td>{{item.Quantity}}</td>
						<td><input type="button" value="Remove" ng-click="removeItem($index)" /></td>
					</tr>
				</tbody>
			</table>
			<br />
			<div>Total Price: {{totalPrice()}}</div>
			<br />
			<table>
				<tr>
					<td>Name: </td>
					<td><input type="text" ng-model="item.Name" /></td>
				</tr>
				<tr>
					<td>Price: </td>
					<td><input type="text" ng-model="item.Price" /></td>
				</tr>
				<tr>
					<td>Quantity: </td>
					<td><input type="text" ng-model="item.Quantity" /></td>
				</tr>
				<tr>
					<td colspan="2"><input type="Button" value="Add" ng-click="addItem(item)" /> </td>
					
				</tr>
			</table>
		</div>
	</div>

CSS

table
{
    border-collapse: collapse;
    border-spacing: 0px;
}
table td
{
    padding: 8px 8px;
}

.boldText { font-weight:bold; }

JavaScript

function ShoppingCartCtrl($scope)  {
		$scope.items = [
			{Name: "Soap", Price: "25", Quantity: "10"},
			{Name: "Shaving cream", Price: "50", Quantity: "15"},
			{Name: "Shampoo", Price: "100", Quantity: "5"}
		];

		$scope.addItem = function(item) {
			$scope.items.push(item);
			$scope.item = {};
		}
    
		$scope.totalPrice = function(){
			var total = 0;
			for(count=0;count<$scope.items.length;count++){
				total += $scope.items[count].Price*$scope.items[count].Quantity;
			}
			return total;
		}
		
		$scope.removeItem = function(index){
			$scope.items.splice(index,1);
		}
	}