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); } }
<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>
table { border-collapse: collapse; border-spacing: 0px; } table td { padding: 8px 8px; } .boldText { font-weight:bold; }