Skip to content

Instantly share code, notes, and snippets.

/index.html

Created September 9, 2014 09:20
Show Gist options
  • Save anonymous/05f1582ca65c5cbfacd4 to your computer and use it in GitHub Desktop.
Save anonymous/05f1582ca65c5cbfacd4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html ng-app="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="clear()">清空購物車</button>
<label style="float: right"><input type="checkbox" ng-model="IsDebug"> 啟用偵錯</label>
<br><br>
<pre ng-hide="!IsDebug">{{newcarts|json}}</pre>
<table class="table">
<caption style="text-align:left">
搜尋: <input type="text" ng-model="keyword">
</caption>
<tr>
<th>功能</th>
<th>#</th>
<th>
<a href="" ng-click="PNameOrderBy=true">↑</a>
商品名稱
<a href="" ng-click="PNameOrderBy=false">↓</a>
</th>
<th>價格</th>
<th>數量</th>
<th>小計</th>
</tr>
<tr ng-repeat="item in newcarts = (carts | filter:keyword | orderBy:'PName':PNameOrderBy)">
<td>
<input type="checkbox" ng-model="item.IsDelete">
<button ng-click="del($index)">刪除</button>
<button ng-click="change_mode(item, 'Edit')"
ng-hide="item.mode=='Edit'">編輯</button>
<button ng-click="change_mode(item, 'View')"
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-show="item.mode == 'Edit'">
<span ng-hide="item.mode == 'Edit'">
{{item.Qty|number}}
</span>
</td>
<td>{{subtotal(item.Price, item.Qty)|number}}</td>
</tr>
<tr>
<td>
<button ng-click="batch_delete()">批次刪除</button>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>{{sum()|number}}</td>
</tr>
</table>
<br><br><br><br>
<script id="jsbin-javascript">
angular.module('app', []);
(function() {
var app = angular.module('app');
app.controller('MainCtrl', ['$scope', function MainCtrl($scope) {
$scope.PName = '襯衫';
$scope.Price = 200;
$scope.Qty = 9;
f
$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(idx) {
$scope.carts.splice(idx, 1);
};
$scope.sum = function() {
var result = 0;
for(var i=0; i < $scope.newcarts.length; i++) {
result = result + $scope.subtotal(
$scope.newcarts[i].Price,
$scope.newcarts[i].Qty
);
}
return result;
};
$scope.clear = function() {
$scope.carts = [];
};
$scope.change_mode = function(item, mode) {
if(mode === 'Edit') {
item.Qty2 = item.Qty;
item.mode = mode;
} else {
if(item.Qty2 >= 0) {
item.Qty = item.Qty2;
delete item.Qty2;
delete item.mode;
} else {
return;
}
}
};
$scope.batch_delete = function() {
var newarray = [];
for(var i=0; i < $scope.carts.length; i++) {
if(!$scope.carts[i].IsDelete) {
newarray.push($scope.carts[i]);
}
}
$scope.carts = newarray;
};
}]);
})();
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html ng-app="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="clear()">清空購物車</button>
<label style="float: right"><input type="checkbox" ng-model="IsDebug"> 啟用偵錯</label>
<br><br>
<pre ng-hide="!IsDebug">{{newcarts|json}}</pre>
<table class="table">
<caption style="text-align:left">
搜尋: <input type="text" ng-model="keyword">
</caption>
<tr>
<th>功能</th>
<th>#</th>
<th>
<a href="" ng-click="PNameOrderBy=true">↑</a>
商品名稱
<a href="" ng-click="PNameOrderBy=false">↓</a>
</th>
<th>價格</th>
<th>數量</th>
<th>小計</th>
</tr>
<tr ng-repeat="item in newcarts = (carts | filter:keyword | orderBy:'PName':PNameOrderBy)">
<td>
<input type="checkbox" ng-model="item.IsDelete">
<button ng-click="del($index)">刪除</button>
<button ng-click="change_mode(item, 'Edit')"
ng-hide="item.mode=='Edit'">編輯</button>
<button ng-click="change_mode(item, 'View')"
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-show="item.mode == 'Edit'">
<span ng-hide="item.mode == 'Edit'">
{{item.Qty|number}}
</span>
</td>
<td>{{subtotal(item.Price, item.Qty)|number}}</td>
</tr>
<tr>
<td>
<button ng-click="batch_delete()">批次刪除</button>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>{{sum()|number}}</td>
</tr>
</table>
<br><br><br><br>
</body>
</html></script>
<script id="jsbin-source-javascript" type="text/javascript">
angular.module('app', []);
(function() {
var app = angular.module('app');
app.controller('MainCtrl', ['$scope', function MainCtrl($scope) {
$scope.PName = '襯衫';
$scope.Price = 200;
$scope.Qty = 9;
f
$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(idx) {
$scope.carts.splice(idx, 1);
};
$scope.sum = function() {
var result = 0;
for(var i=0; i < $scope.newcarts.length; i++) {
result = result + $scope.subtotal(
$scope.newcarts[i].Price,
$scope.newcarts[i].Qty
);
}
return result;
};
$scope.clear = function() {
$scope.carts = [];
};
$scope.change_mode = function(item, mode) {
if(mode === 'Edit') {
item.Qty2 = item.Qty;
item.mode = mode;
} else {
if(item.Qty2 >= 0) {
item.Qty = item.Qty2;
delete item.Qty2;
delete item.mode;
} else {
return;
}
}
};
$scope.batch_delete = function() {
var newarray = [];
for(var i=0; i < $scope.carts.length; i++) {
if(!$scope.carts[i].IsDelete) {
newarray.push($scope.carts[i]);
}
}
$scope.carts = newarray;
};
}]);
})();
</script></body>
</html>
Raw
jsbin.ng99.js
angular.module('app', []);
(function() {
var app = angular.module('app');
app.controller('MainCtrl', ['$scope', function MainCtrl($scope) {
$scope.PName = '襯衫';
$scope.Price = 200;
$scope.Qty = 9;
f
$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(idx) {
$scope.carts.splice(idx, 1);
};
$scope.sum = function() {
var result = 0;
for(var i=0; i < $scope.newcarts.length; i++) {
result = result + $scope.subtotal(
$scope.newcarts[i].Price,
$scope.newcarts[i].Qty
);
}
return result;
};
$scope.clear = function() {
$scope.carts = [];
};
$scope.change_mode = function(item, mode) {
if(mode === 'Edit') {
item.Qty2 = item.Qty;
item.mode = mode;
} else {
if(item.Qty2 >= 0) {
item.Qty = item.Qty2;
delete item.Qty2;
delete item.mode;
} else {
return;
}
}
};
$scope.batch_delete = function() {
var newarray = [];
for(var i=0; i < $scope.carts.length; i++) {
if(!$scope.carts[i].IsDelete) {
newarray.push($scope.carts[i]);
}
}
$scope.carts = newarray;
};
}]);
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment