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;
}
})
.directive('validPrice',function(){
return{
require: "ngModel",
link: function(scope, elm, attrs, ctrl){
var regex=/^\d{2,4}(\.\d{1,2})?$/;
ctrl.$parsers.unshift(function(viewValue){
var floatValue = parseFloat(viewValue);
if( floatValue >= 50 && floatValue <=5000 && regex.test(viewValue)){
ctrl.$setValidity('validPrice',true);
//return viewValue;
}
else{
ctrl.$setValidity('validPrice',false);
}
return viewValue;
});
}
};
});
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 = {};
$scope.itemForm.$setPristine();
};
$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]);
};
$scope.name=/^[a-zA-Z ]*$/;
$scope.integerval=/^\d*$/;
}
<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>
<tr ng-repeat="item in items | orderBy:mySortFunction | filter:search">
<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 />
<form novalidate name="itemForm">
<table>
<tr>
<td>Name: </td>
<td><input name="name" type="text" ng-model="item.Name" required ng-pattern="name" /></td>
</tr>
<tr>
<td>Price: </td>
<td><input name="price" type="text" ng-model="item.Price" required valid-price /></td>
</tr>
<tr>
<td>Quantity: </td>
<td><input name="quantity" type="number" ng-model="item.Quantity" min="1" max="90" ng-pattern="integerval" required /></td>
</tr>
<tr>
<td colspan="2"><input type="Button" value="Add" ng-click="addItem(item)" ng-disabled="itemForm.$invalid" /> </td>
</tr>
</table>
</form>
<div ng-show="itemForm.name.$dirty && itemForm.name.$invalid">
<span ng-show="itemForm.name.$error.required">Name cannot be left blank</span>
<span ng-show="itemForm.name.$error.pattern">Name cannot contain numbers or special characters</span>
</div>
<div ng-show="itemForm.price.$dirty && itemForm.price.$invalid">
<span ng-show="itemForm.price.$error.required">Price cannot be blank</span>
<span ng-show="itemForm.price.$error.validPrice">Price should be a number between 50 and 5000 with maximum 2 digits after decimal point</span>
</div>
<div ng-show="itemForm.quantity.$dirty && itemForm.quantity.$invalid">
<span ng-show="itemForm.quantity.$error.required">Quantity cannot be blank</span>
<span ng-show="itemForm.quantity.$error.pattern || itemForm.quantity.$error.min || itemForm.quantity.$error.max">Quantity should be an integer between 1 and 90</span>
</div>
</div>
</div>
.bold { font-weight:bold; }
table td{
padding: 10px;
}
table th{
font-weight: bold;
text-align: center;
}
input.ng-invalid.ng-dirty {
background-color: #FA787E;
}
input.ng-valid.ng-dirty {
background-color: #78FA89;
}
span[ng-show]{
color: #FA787E;
}
External resources loaded into this fiddle: