Skip to content

Instantly share code, notes, and snippets.

@ihower

ihower/index.html

Created September 21, 2014 08:09
Show Gist options
  • Save ihower/7e5cfd3bf05139753b09 to your computer and use it in GitHub Desktop.
Save ihower/7e5cfd3bf05139753b09 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html ng-app>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
.highlight {
background-color: lightblue;
}
.highlight_selected {
background-color: yellow;
}
</style>
</head>
<body ng-controller="MainCtrl">
Product Name: <input type="text" ng-model="cartitem.PName"> <br>
Product Price: <input type="number" ng-model="cartitem.Price"> <br>
Quantity: <input type="number" ng-model="cartitem.Qty"> <br>
You bought {{cartitem.PName}} price: {{cartitem.Price | number }} quantity: {{cartitem.Qty | number }} and total ${{ cartitem.subtotal() || 0 | number }}.
<br>
<button ng-click="cart.add()">Add to Cart</button>
<button ng-click="cart.clear()">Clear</button>
<label><input type="checkbox" ng-model="IsDebug"> Enable Debug</label>
<pre ng-show="IsDebug">{{ cart.items | json }}</pre>
<br>
<table class="table">
<caption>
Search: <input type="text" ng-model="keyword">
</caption>
<tr>
<th><input type="checkbox" ng-model="cart.remove_all_box" ng-change="cart.change_remove_box()"></th>
<th>#</th>
<th>
Name
<a href="" ng-click="sortCond='PName'">↑</a>
<a href="" ng-click="sortCond='-PName'">↓</a>
</th>
<th>
Price
<a href="" ng-click="sortCond='Price'">↑</a>
<a href="" ng-click="sortCond='-Price'">↓</a>
</th>
<th>Qty
<a href="" ng-click="sortCond='Qty'">↑</a>
<a href="" ng-click="sortCond='-Qty'">↓</a>
</th>
<th>Subtotal
<a href="" ng-click="sortCond='subtotal()'">↑</a>
<a href="" ng-click="sortCond='-subtotal()'">↓</a>
</th>
<th>Actions</th>
</tr>
<tr ng-repeat="item in cart.items | filter: { PName: keyword } | orderBy: sortCond " ng-class="{ highlight_selected: item.isRemove, highlight: item.mouseOver }" ng-mouseover="item.mouseOver=true" ng-mouseleave="item.mouseOver=false">
<td><input type="checkbox" ng-model="item.isRemove"></td>
<td>{{ $index+1 }}</td>
<td>{{ item.PName }}</td>
<td>{{ item.Price }}</td>
<td>
<span ng-hide="item.editMode">{{ item.Qty }}</span>
<input ng-show="item.editMode" type="number" class="input-small" ng-model="item.tmpQty">
</td>
<td>{{ item.subtotal() }}</td>
<td>
<button ng-hide="item.editMode" ng-click="cart.edit(item)">Edit</button>
<button ng-show="item.editMode" ng-click="cart.editDone(item)">Done</button>
<button ng-click="cart.remove(item)">Remove</button></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Total:</td>
<td>${{ cart.total() | number }}</td>
</tr>
</table>
<button ng-click="cart.bulkRemove()">Bulk Remove</button>
<script id="jsbin-javascript">
function MainCtrl($scope) {
$scope.IsDebug = false;
$scope.cartitem = {
PName: "iphone",
Price: 200,
Qty: 2,
subtotal: function(){
var result = this.Price * this.Qty;
if (this.Qty > 10){
result = result * 0.9;
}
return result;
}
};
$scope.cart = {
items: [],
add: function(){
this.items.push(
angular.copy($scope.cartitem)
);
},
remove: function(item) {
//$scope.cart.items.splice(idx, 1);
for(var idx in this.items) {
if (item === this.items[idx]){
this.items.splice(idx, 1);
break;
}
}
},
bulkRemove: function(){
var new_items = [];
for(var idx in this.items) {
var item = this.items[idx];
if (!item.isRemove) {
new_items.push(item);
}
}
this.remove_all_box = false;
this.items = new_items;
},
change_remove_box: function() {
for(var idx in this.items) {
var item = this.items[idx];
item.isRemove = this.remove_all_box;
}
},
clear: function(){
this.items=[];
},
edit: function(item){
item.editMode = true;
item.tmpQty = item.Qty;
},
editDone: function(item){
delete item.editMode;
item.Qty = item.tmpQty;
},
total: function(){
var total = 0;
for(var idx in this.items) {
var item = this.items[idx];
total += item.subtotal();
}
return total;
}
};
}
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html ng-app>
<head>
<script src="//code.jquery.com/jquery.min.js"><\/script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"><\/script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-controller="MainCtrl">
Product Name: <input type="text" ng-model="cartitem.PName"> <br>
Product Price: <input type="number" ng-model="cartitem.Price"> <br>
Quantity: <input type="number" ng-model="cartitem.Qty"> <br>
You bought {{cartitem.PName}} price: {{cartitem.Price | number }} quantity: {{cartitem.Qty | number }} and total ${{ cartitem.subtotal() || 0 | number }}.
<br>
<button ng-click="cart.add()">Add to Cart</button>
<button ng-click="cart.clear()">Clear</button>
<label><input type="checkbox" ng-model="IsDebug"> Enable Debug</label>
<pre ng-show="IsDebug">{{ cart.items | json }}</pre>
<br>
<table class="table">
<caption>
Search: <input type="text" ng-model="keyword">
</caption>
<tr>
<th><input type="checkbox" ng-model="cart.remove_all_box" ng-change="cart.change_remove_box()"></th>
<th>#</th>
<th>
Name
<a href="" ng-click="sortCond='PName'">↑</a>
<a href="" ng-click="sortCond='-PName'">↓</a>
</th>
<th>
Price
<a href="" ng-click="sortCond='Price'">↑</a>
<a href="" ng-click="sortCond='-Price'">↓</a>
</th>
<th>Qty
<a href="" ng-click="sortCond='Qty'">↑</a>
<a href="" ng-click="sortCond='-Qty'">↓</a>
</th>
<th>Subtotal
<a href="" ng-click="sortCond='subtotal()'">↑</a>
<a href="" ng-click="sortCond='-subtotal()'">↓</a>
</th>
<th>Actions</th>
</tr>
<tr ng-repeat="item in cart.items | filter: { PName: keyword } | orderBy: sortCond " ng-class="{ highlight_selected: item.isRemove, highlight: item.mouseOver }" ng-mouseover="item.mouseOver=true" ng-mouseleave="item.mouseOver=false">
<td><input type="checkbox" ng-model="item.isRemove"></td>
<td>{{ $index+1 }}</td>
<td>{{ item.PName }}</td>
<td>{{ item.Price }}</td>
<td>
<span ng-hide="item.editMode">{{ item.Qty }}</span>
<input ng-show="item.editMode" type="number" class="input-small" ng-model="item.tmpQty">
</td>
<td>{{ item.subtotal() }}</td>
<td>
<button ng-hide="item.editMode" ng-click="cart.edit(item)">Edit</button>
<button ng-show="item.editMode" ng-click="cart.editDone(item)">Done</button>
<button ng-click="cart.remove(item)">Remove</button></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Total:</td>
<td>${{ cart.total() | number }}</td>
</tr>
</table>
<button ng-click="cart.bulkRemove()">Bulk Remove</button>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">.highlight {
background-color: lightblue;
}
.highlight_selected {
background-color: yellow;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">function MainCtrl($scope) {
$scope.IsDebug = false;
$scope.cartitem = {
PName: "iphone",
Price: 200,
Qty: 2,
subtotal: function(){
var result = this.Price * this.Qty;
if (this.Qty > 10){
result = result * 0.9;
}
return result;
}
};
$scope.cart = {
items: [],
add: function(){
this.items.push(
angular.copy($scope.cartitem)
);
},
remove: function(item) {
//$scope.cart.items.splice(idx, 1);
for(var idx in this.items) {
if (item === this.items[idx]){
this.items.splice(idx, 1);
break;
}
}
},
bulkRemove: function(){
var new_items = [];
for(var idx in this.items) {
var item = this.items[idx];
if (!item.isRemove) {
new_items.push(item);
}
}
this.remove_all_box = false;
this.items = new_items;
},
change_remove_box: function() {
for(var idx in this.items) {
var item = this.items[idx];
item.isRemove = this.remove_all_box;
}
},
clear: function(){
this.items=[];
},
edit: function(item){
item.editMode = true;
item.tmpQty = item.Qty;
},
editDone: function(item){
delete item.editMode;
item.Qty = item.tmpQty;
},
total: function(){
var total = 0;
for(var idx in this.items) {
var item = this.items[idx];
total += item.subtotal();
}
return total;
}
};
}</script></body>
</html>
Raw
jsbin.terew.css
.highlight {
background-color: lightblue;
}
.highlight_selected {
background-color: yellow;
}
Raw
jsbin.terew.js
function MainCtrl($scope) {
$scope.IsDebug = false;
$scope.cartitem = {
PName: "iphone",
Price: 200,
Qty: 2,
subtotal: function(){
var result = this.Price * this.Qty;
if (this.Qty > 10){
result = result * 0.9;
}
return result;
}
};
$scope.cart = {
items: [],
add: function(){
this.items.push(
angular.copy($scope.cartitem)
);
},
remove: function(item) {
//$scope.cart.items.splice(idx, 1);
for(var idx in this.items) {
if (item === this.items[idx]){
this.items.splice(idx, 1);
break;
}
}
},
bulkRemove: function(){
var new_items = [];
for(var idx in this.items) {
var item = this.items[idx];
if (!item.isRemove) {
new_items.push(item);
}
}
this.remove_all_box = false;
this.items = new_items;
},
change_remove_box: function() {
for(var idx in this.items) {
var item = this.items[idx];
item.isRemove = this.remove_all_box;
}
},
clear: function(){
this.items=[];
},
edit: function(item){
item.editMode = true;
item.tmpQty = item.Qty;
},
editDone: function(item){
delete item.editMode;
item.Qty = item.tmpQty;
},
total: function(){
var total = 0;
for(var idx in this.items) {
var item = this.items[idx];
total += item.subtotal();
}
return total;
}
};
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment