angular.module('shopping',[])
.value('shopping_cart_operations',{
items : [
{Name: "Soap", Price: "25", Quantity: "10"},
{Name: "Shaving cream", Price: "50", Quantity: "15"},
{Name: "Shampoo", Price: "100", Quantity: "5"}
],
addItem: function(item){
this.items.push(item);
},
totalPrice: function(){
var total = 0;
for(count=0;count<this.items.length;count++){
total += this.items[count].Price*this.items[count].Quantity;
}
return total;
},
removeItem: function(index){
this.items.splice(index,1);
}
})
.filter('rupee',function(){
return function(item){
return "Rs. "+item+".00";
}
});
function ShoppingCartCtrl($scope,shopping_cart_operations) {
$scope.items = shopping_cart_operations.items;
$scope.item = {};
$scope.addItem = function(item) {
shopping_cart_operations.addItem(item);
$scope.item = {}; //clear out item object
};
$scope.totalPrice = shopping_cart_operations.totalPrice;
$scope.removeItem = function(index){
shopping_cart_operations.removeItem(index);
};
$scope.mySortFunction = function(item) {
if(isNaN(item[$scope.sortExpression]))
return item[$scope.sortExpression];
return parseInt(item[$scope.sortExpression]);
}
}
<div ng-app="shopping">
<div ng-controller="ShoppingCartCtrl">
<div>Sort by:
<select ng-model="sortExpression">
<option value="Name">Name</option>
<option value="Price">Price</option>
<option value="Quantity">Quantity</option>
</select>
</div>
<br />
<div><strong>Filter Results</strong></div>
<table>
<tr>
<td>By Any: </td>
<td><input type="text" ng-model="search.$" /></td>
</tr>
<tr>
<td>By Name: </td>
<td><input type="text" ng-model="search.Name" /></td>
</tr>
<tr>
<td>By Price: </td>
<td><input type="text" ng-model="search.Price" /></td>
</tr>
<tr>
<td>By Quantity: </td>
<td><input type="text" ng-model="search.Quantity" /></td>
</tr>
</table>
<br />
<table border="1">
<thead>
<tr>
<td>Name</td>
<td>Price</td>
<td>Quantity</td>
<td>Remove</td>
</tr>
</thead>
<tbody ng-repeat="item in items | orderBy:mySortFunction | filter:search">
<tr>
<td>{{item.Name}}</td>
<td>{{item.Price | rupee}}</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>
.bold { font-weight:bold; }
table td{
padding: 10px;
}
table th{
font-weight: bold;
text-align: center;
}
External resources loaded into this fiddle: