Skip to content

Instantly share code, notes, and snippets.

@tesshsu

tesshsu/index.html

Last active November 22, 2021 01:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save tesshsu/a56a94d5d26be0494581 to your computer and use it in GitHub Desktop.
Save tesshsu/a56a94d5d26be0494581 to your computer and use it in GitHub Desktop.
Download ZIP
Demo Usage of Angularjs for increase Qty and Price will binding in the same time
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.26/angular.min.js"></script>
<meta charset="utf-8">
<title>Tess</title>
<style id="jsbin-css">
body{
background: #00FFFF;
padding: 10px;
border: solide 2px #fff;
color: #0000FF;
font-weight: bold;
}
h1{
color: #FF00FF;
font-family: fantasy;
}
input{
box-shadow: 0px 2px 2px #333333;
border: solide 2px #ce5567;
border-radius: 5px;
height: 15px;
}
ul{
padding: 5px;
list-style: none;
}
li{
padding: 10px;
}
</style>
</head>
<body ng-controller="MainCtrl">
<h1>Best Products for sell!!</h1>
<div class="form">
<ul>
<li>1.Prodoct Name: <input type="text" ng-model="PName" placeholder="wirte">
</li>
<li>2.Prodoct Price: <input type="number" ng-model="Price"></li>
<li>3.Prodoct quantity: <input type="number" ng-model="Qty"></li>
</ul>
</div>
You buy{{PName}}products{{Qty}},price{{Price|number:2}} NT,total: {{subtotal()|currency:"NT$"}}
<br>
<br>
<button ng-click="add()">add cart</button>
<br>
<br>
<lable><input type="checkbox" ng-model="IsDebut">demarre</lable>
<pre ng-show="IsDebug">
{{carts|json}}</pre>
<br><br>
<table class="table">
<tr>
<td>#</td>
<td>Product Name</td>
<td>Price</td>
<td>Qty</td>
<td>Total</td>
<td>Delet</td>
</tr>
<tr ng-repeat="item in carts">
<td>{{index+1}}</td>
<td>{{item.PName}}</td>
<td>{{item.Price}}</td>
<td>{{item.Qty}}<button ng-click="plus(item,1)">+<button ng-click="plus(item,-1)">-</td>
<td>{{subtotal(item.Qty,item.Price)|number}}</td>
<td><button ng-click="removeItem(item)">delete</button></td>
</tr>
<tr>
<td></td>
<td></td>
<td>Total:</td>
<td></td>
<td>{{sum()}}</td>
</tr>
</table>
<script id="jsbin-javascript">
function MainCtrl($scope){
//ng-init="PName='Tess'; Price=200.799;Qty=5"
$scope.PName ='Tess';
$scope.Price = 200;
$scope.Qty = 5;
$scope.subtotal = function(Qty,Price){
var r = Price*Qty;
if(Qty >= 10) {
r*= 0.8;
}
return r;
};
$scope.carts = [];
$scope.carts.push({
PName: 'pant',
Price: 800,
Qty: 5,
});
$scope.carts.push({
PName: 'shoes',
Price: 800,
Qty: 11,
});
$scope.carts.push({
PName: 'tshirt',
Price: 800,
Qty: 12,
});
$scope.add = function(){
$scope.carts.push({
PName: $scope.PName,
Price: $scope.Price,
Qty: $scope.Qty,
});
$scope.sum = function(){
var r = 0;
for(var i in $scope.carts) {
var item = $scope.carts[i];
r += $scope.subtotal(item.Qty,item.Price);}
return r;
};
// remove Item
$scope.removeItem = function (item) {
var idx = $scope.carts.indexOf(item);
$scope.carts.splice(idx, 1);
};
};
//add item
$scope.plus =function(item, num){
item.Qty += num;
if(item.Qty<=0){
$scope.del(item);
}
};
}
</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.26/angular.min.js"><\/script>
<meta charset="utf-8">
<title>Tess</title>
</head>
<body ng-controller="MainCtrl">
<h1>Best Products for sell!!</h1>
<div class="form">
<ul>
<li>1.Prodoct Name: <input type="text" ng-model="PName" placeholder="wirte">
</li>
<li>2.Prodoct Price: <input type="number" ng-model="Price"></li>
<li>3.Prodoct quantity: <input type="number" ng-model="Qty"></li>
</ul>
</div>
You buy{{PName}}products{{Qty}},price{{Price|number:2}} NT,total: {{subtotal()|currency:"NT$"}}
<br>
<br>
<button ng-click="add()">add cart</button>
<br>
<br>
<lable><input type="checkbox" ng-model="IsDebut">demarre</lable>
<pre ng-show="IsDebug">
{{carts|json}}</pre>
<br><br>
<table class="table">
<tr>
<td>#</td>
<td>Product Name</td>
<td>Price</td>
<td>Qty</td>
<td>Total</td>
<td>Delet</td>
</tr>
<tr ng-repeat="item in carts">
<td>{{index+1}}</td>
<td>{{item.PName}}</td>
<td>{{item.Price}}</td>
<td>{{item.Qty}}<button ng-click="plus(item,1)">+<button ng-click="plus(item,-1)">-</td>
<td>{{subtotal(item.Qty,item.Price)|number}}</td>
<td><button ng-click="removeItem(item)">delete</button></td>
</tr>
<tr>
<td></td>
<td></td>
<td>Total:</td>
<td></td>
<td>{{sum()}}</td>
</tr>
</table>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">body{
background: #00FFFF;
padding: 10px;
border: solide 2px #fff;
color: #0000FF;
font-weight: bold;
}
h1{
color: #FF00FF;
font-family: fantasy;
}
input{
box-shadow: 0px 2px 2px #333333;
border: solide 2px #ce5567;
border-radius: 5px;
height: 15px;
}
ul{
padding: 5px;
list-style: none;
}
li{
padding: 10px;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">function MainCtrl($scope){
//ng-init="PName='Tess'; Price=200.799;Qty=5"
$scope.PName ='Tess';
$scope.Price = 200;
$scope.Qty = 5;
$scope.subtotal = function(Qty,Price){
var r = Price*Qty;
if(Qty >= 10) {
r*= 0.8;
}
return r;
};
$scope.carts = [];
$scope.carts.push({
PName: 'pant',
Price: 800,
Qty: 5,
});
$scope.carts.push({
PName: 'shoes',
Price: 800,
Qty: 11,
});
$scope.carts.push({
PName: 'tshirt',
Price: 800,
Qty: 12,
});
$scope.add = function(){
$scope.carts.push({
PName: $scope.PName,
Price: $scope.Price,
Qty: $scope.Qty,
});
$scope.sum = function(){
var r = 0;
for(var i in $scope.carts) {
var item = $scope.carts[i];
r += $scope.subtotal(item.Qty,item.Price);}
return r;
};
// remove Item
$scope.removeItem = function (item) {
var idx = $scope.carts.indexOf(item);
$scope.carts.splice(idx, 1);
};
};
//add item
$scope.plus =function(item, num){
item.Qty += num;
if(item.Qty<=0){
$scope.del(item);
}
};
}
</script></body>
</html>
Raw
jsbin.kufuzacofu.css
body{
background: #00FFFF;
padding: 10px;
border: solide 2px #fff;
color: #0000FF;
font-weight: bold;
}
h1{
color: #FF00FF;
font-family: fantasy;
}
input{
box-shadow: 0px 2px 2px #333333;
border: solide 2px #ce5567;
border-radius: 5px;
height: 15px;
}
ul{
padding: 5px;
list-style: none;
}
li{
padding: 10px;
}
Raw
jsbin.kufuzacofu.js
function MainCtrl($scope){
//ng-init="PName='Tess'; Price=200.799;Qty=5"
$scope.PName ='Tess';
$scope.Price = 200;
$scope.Qty = 5;
$scope.subtotal = function(Qty,Price){
var r = Price*Qty;
if(Qty >= 10) {
r*= 0.8;
}
return r;
};
$scope.carts = [];
$scope.carts.push({
PName: 'pant',
Price: 800,
Qty: 5,
});
$scope.carts.push({
PName: 'shoes',
Price: 800,
Qty: 11,
});
$scope.carts.push({
PName: 'tshirt',
Price: 800,
Qty: 12,
});
$scope.add = function(){
$scope.carts.push({
PName: $scope.PName,
Price: $scope.Price,
Qty: $scope.Qty,
});
$scope.sum = function(){
var r = 0;
for(var i in $scope.carts) {
var item = $scope.carts[i];
r += $scope.subtotal(item.Qty,item.Price);}
return r;
};
// remove Item
$scope.removeItem = function (item) {
var idx = $scope.carts.indexOf(item);
$scope.carts.splice(idx, 1);
};
};
//add item
$scope.plus =function(item, num){
item.Qty += num;
if(item.Qty<=0){
$scope.del(item);
}
};
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment