Skip to content

Instantly share code, notes, and snippets.

/index.html

Created September 9, 2014 09:24
Show Gist options
  • Save anonymous/fa63c151b6d1be2b0323 to your computer and use it in GitHub Desktop.
Save anonymous/fa63c151b6d1be2b0323 to your computer and use it in GitHub Desktop.
Download ZIP
// source http://jsbin.com
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>
</head>
<body ng-controller="MainCtrl">
商品名稱: <input type="text" ng-model="PName"><br>
商品價格: <input type="number" ng-model="Price"><br>
購買數量: <input type="number" ng-model="Qty"><br>
<br>
您購買了 {{PName}} 商品，單價 NT${{Price|number:0}} 元，數量 {{Qty|number}} 件，共 {{subtotal(Price, Qty)|currency:"NT$"}} 元。
<br><br>
<button ng-click="add()">加入購物車</button>
<button ng-click="cls()">清除購物車</button> <br>
<input type="checkbox" ng-model="isDebug">除錯</checkbox>
<pre ng-if="isDebug">{{carts|json}}</pre>
<hr>
<table class="table">
<tr>
<th>功能</th>
<th>#</th>
<th>商品名稱</th>
<th>價格</th>
<th>數量</th>
<th>小計</th>
</tr>
<tr ng-repeat="item in carts">
<td>
<input type="checkbox" ng-model="item.selected">
<button ng-click="del($index)">刪除</button>
<button ng-click="edit(item)" ng-hide="item.mode ==='edit'">編輯</button>
<button ng-click="end(item)" ng-show="item.mode==='edit'">完成</button>
</td>
<td>{{$index+1}}</td>
<td>{{item.PName}}</td>
<td>{{item.Price|number}}</td>
<td>
<input type="number" class="input-small" ng-model="item.Qty2" ng-if="item.mode">
<span ng-hide="item.mode">{{item.Qty|number}}</span>
</td>
<td>{{subtotal(item.Price, item.Qty)|number}}</td>
</tr>
<tr>
<td>
<button ng-click="batchDelete()">批次刪除</button>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>{{sum()|number}}</td>
</tr>
</table>
<script id="jsbin-javascript">
function MainCtrl($scope) {
$scope.PName = '襯衫';
$scope.Price = 200;
$scope.Qty = 9;
$scope.subtotal = function(Price, Qty) {
var ret = Price * Qty;
if(Qty >= 10) {
ret = ret * 0.9;
}
return ret;
};
$scope.carts = [];
$scope.carts.push({
PName: 'T-Shirt',
Price: 800,
Qty: 5
});
$scope.carts.push({
PName: '眼鏡',
Price: 1000,
Qty: 10
});
$scope.add = function (){
$scope.carts.push({
PName: $scope.PName,
Price: $scope.Price,
Qty: $scope.Qty
});
}
$scope.del = function (index)
{
$scope.carts.splice (index, 1);
}
$scope.sum = function() {
var result = 0;
for(var i=0; i < $scope.carts.length; i++) {
result = result + $scope.subtotal(
$scope.carts[i].Price,
$scope.carts[i].Qty
);
}
return result;
};
$scope.cls = function() {
$scope.carts =[];
};
$scope.edit = function(item) {
item.mode = 'edit';
item.Qty2 = item.Qty;
};
$scope.end = function(item) {
delete item.mode;
item.Qty = item.Qty2;
};
$scope.batchDelete = function ()
{
for(var i=0; i < $scope.carts.length; i++) {
var array =[];
if ($scope.carts[i].selected != true)
{
console.log($scope.carts[i].selected);
array.push($scope.carts[i]);
}
$scope.carts = array;6
}
}
}
</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">
商品名稱: <input type="text" ng-model="PName"><br>
商品價格: <input type="number" ng-model="Price"><br>
購買數量: <input type="number" ng-model="Qty"><br>
<br>
您購買了 {{PName}} 商品，單價 NT${{Price|number:0}} 元，數量 {{Qty|number}} 件，共 {{subtotal(Price, Qty)|currency:"NT$"}} 元。
<br><br>
<button ng-click="add()">加入購物車</button>
<button ng-click="cls()">清除購物車</button> <br>
<input type="checkbox" ng-model="isDebug">除錯</checkbox>
<pre ng-if="isDebug">{{carts|json}}</pre>
<hr>
<table class="table">
<tr>
<th>功能</th>
<th>#</th>
<th>商品名稱</th>
<th>價格</th>
<th>數量</th>
<th>小計</th>
</tr>
<tr ng-repeat="item in carts">
<td>
<input type="checkbox" ng-model="item.selected">
<button ng-click="del($index)">刪除</button>
<button ng-click="edit(item)" ng-hide="item.mode ==='edit'">編輯</button>
<button ng-click="end(item)" ng-show="item.mode==='edit'">完成</button>
</td>
<td>{{$index+1}}</td>
<td>{{item.PName}}</td>
<td>{{item.Price|number}}</td>
<td>
<input type="number" class="input-small" ng-model="item.Qty2" ng-if="item.mode">
<span ng-hide="item.mode">{{item.Qty|number}}</span>
</td>
<td>{{subtotal(item.Price, item.Qty)|number}}</td>
</tr>
<tr>
<td>
<button ng-click="batchDelete()">批次刪除</button>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>{{sum()|number}}</td>
</tr>
</table>
</body>
</html></script>
<script id="jsbin-source-javascript" type="text/javascript">function MainCtrl($scope) {
$scope.PName = '襯衫';
$scope.Price = 200;
$scope.Qty = 9;
$scope.subtotal = function(Price, Qty) {
var ret = Price * Qty;
if(Qty >= 10) {
ret = ret * 0.9;
}
return ret;
};
$scope.carts = [];
$scope.carts.push({
PName: 'T-Shirt',
Price: 800,
Qty: 5
});
$scope.carts.push({
PName: '眼鏡',
Price: 1000,
Qty: 10
});
$scope.add = function (){
$scope.carts.push({
PName: $scope.PName,
Price: $scope.Price,
Qty: $scope.Qty
});
}
$scope.del = function (index)
{
$scope.carts.splice (index, 1);
}
$scope.sum = function() {
var result = 0;
for(var i=0; i < $scope.carts.length; i++) {
result = result + $scope.subtotal(
$scope.carts[i].Price,
$scope.carts[i].Qty
);
}
return result;
};
$scope.cls = function() {
$scope.carts =[];
};
$scope.edit = function(item) {
item.mode = 'edit';
item.Qty2 = item.Qty;
};
$scope.end = function(item) {
delete item.mode;
item.Qty = item.Qty2;
};
$scope.batchDelete = function ()
{
for(var i=0; i < $scope.carts.length; i++) {
var array =[];
if ($scope.carts[i].selected != true)
{
console.log($scope.carts[i].selected);
array.push($scope.carts[i]);
}
$scope.carts = array;6
}
}
}</script></body>
</html>
Raw
jsbin.untitled.js
function MainCtrl($scope) {
$scope.PName = '襯衫';
$scope.Price = 200;
$scope.Qty = 9;
$scope.subtotal = function(Price, Qty) {
var ret = Price * Qty;
if(Qty >= 10) {
ret = ret * 0.9;
}
return ret;
};
$scope.carts = [];
$scope.carts.push({
PName: 'T-Shirt',
Price: 800,
Qty: 5
});
$scope.carts.push({
PName: '眼鏡',
Price: 1000,
Qty: 10
});
$scope.add = function (){
$scope.carts.push({
PName: $scope.PName,
Price: $scope.Price,
Qty: $scope.Qty
});
}
$scope.del = function (index)
{
$scope.carts.splice (index, 1);
}
$scope.sum = function() {
var result = 0;
for(var i=0; i < $scope.carts.length; i++) {
result = result + $scope.subtotal(
$scope.carts[i].Price,
$scope.carts[i].Qty
);
}
return result;
};
$scope.cls = function() {
$scope.carts =[];
};
$scope.edit = function(item) {
item.mode = 'edit';
item.Qty2 = item.Qty;
};
$scope.end = function(item) {
delete item.mode;
item.Qty = item.Qty2;
};
$scope.batchDelete = function ()
{
for(var i=0; i < $scope.carts.length; i++) {
var array =[];
if ($scope.carts[i].selected != true)
{
console.log($scope.carts[i].selected);
array.push($scope.carts[i]);
}
$scope.carts = array;6
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment