Angular js 增刪改查
阿新 • • 發佈：2018-11-17
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
tbody tr:nth-child(odd){
background-color: aqua;
}
tbody tr:nth-child(even){
background-color:deeppink;
}
</style>
<script type="text/javascript" src="js/angular.js" ></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope,$http){
$http.get("js/proo.json")
.success(function(aa){
$scope.message = aa;
})
//刪除
$scope.sc = function(){
for(var i=0;i<$scope.message.length;i++){
if($scope.message[i].xz){
$scope.message.splice(i,1);
i--;
}
}
}
//清空購物車
$scope.qk = function(){
$scope.message.splice(0,$scope.message.length);
}
//商品總數
$scope.sum = function(){
count = 0;
for(var i in $scope.message){
count=count+$scope.message[i].gnum;
}
return count;
}
//商品總價
$scope.snum = function(){
count = 0;
for(var i in $scope.message){
count = count+$scope.message[i].gnum*$scope.message[i].gprice;
}
return count;
}
//商品數量的加減
$scope.count = function(num,sname){
for(var i=0;i<$scope.message.length;i++){
if($scope.message[i].gname == sname){
if($scope.message[i].gnum == 1 && num == -1 ){
var f = confirm("確認刪除嗎？")
if(f){
$scope.message.splice(i,1);
}
}
else{
$scope.message[i].gnum =
$scope.message[i].gnum+num;
}
}
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h1 style="background-color: aquamarine;">我的購物車詳情</h1>
<input type="text" placeholder="根據名稱查詢" style="border-radius: 10px;background-color: yellow; margin-left: 300px;" ng-model="cx" /><br /><br />
<table border="1" style="background-color: darkgrey;" align="center">
<thead>
<tr align="center">
<td ng-click="px='+gid'">商品編號</td>
<td>商品名稱</td>
<td>商品數量</td>
<td>商品單價</td>
<td ng-click="px='-gcount'">價格小計</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="s in message | filter:{gname:cx} |orderBy:px" align="center">
<td>{{s.gid}}</td>
<td>{{s.gname}}</td>
<td>
<button ng-click="count(+1,s.gname)">+</button>
<input style="width: 30px;" ng-model="s.gnum" />
<button ng-click="count(-1,s.gname)">-</button>
</td>
<td>{{s.gprice}}</td>
<td>{{s.gnum*s.gprice}}</td>
<td><input type="checkbox" ng-model="s.xz" /></td>
</tr>
</tbody>
</table><br />
<button style="background-color: green; margin-right: 45px; margin-left: 45px;">商品總數{{sum()}}</button>
<button style="background-color: green; margin-right: 45px;">商品總價{{snum()}}</button>
<button style="background-color: yellow; margin-right: 45px;" ng-click="qk()" ng-model="del">清空購物車</button>
<button style="background-color: yellow; margin-right: 45px;" ng-click="sc()" ng-model="ss">刪除</button>
</center>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
tbody tr:nth-child(odd){
background-color: aqua;
}
tbody tr:nth-child(even){
background-color:deeppink;
}
</style>
<script type="text/javascript" src="js/angular.js" ></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope,$http){
$http.get("js/proo.json")
.success(function(aa){
$scope.message = aa;
})
//刪除
$scope.sc = function(){
for(var i=0;i<$scope.message.length;i++){
if($scope.message[i].xz){
$scope.message.splice(i,1);
i--;
}
}
}
//清空購物車
$scope.qk = function(){
$scope.message.splice(0,$scope.message.length);
}
//商品總數
$scope.sum = function(){
count = 0;
for(var i in $scope.message){
count=count+$scope.message[i].gnum;
}
return count;
}
//商品總價
$scope.snum = function(){
count = 0;
for(var i in $scope.message){
count = count+$scope.message[i].gnum*$scope.message[i].gprice;
}
return count;
}
//商品數量的加減
$scope.count = function(num,sname){
for(var i=0;i<$scope.message.length;i++){
if($scope.message[i].gname == sname){
if($scope.message[i].gnum == 1 && num == -1 ){
var f = confirm("確認刪除嗎？")
if(f){
$scope.message.splice(i,1);
}
}
else{
$scope.message[i].gnum =
$scope.message[i].gnum+num;
}
}
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h1 style="background-color: aquamarine;">我的購物車詳情</h1>
<input type="text" placeholder="根據名稱查詢" style="border-radius: 10px;background-color: yellow; margin-left: 300px;" ng-model="cx" /><br /><br />
<table border="1" style="background-color: darkgrey;" align="center">
<thead>
<tr align="center">
<td ng-click="px='+gid'">商品編號</td>
<td>商品名稱</td>
<td>商品數量</td>
<td>商品單價</td>
<td ng-click="px='-gcount'">價格小計</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="s in message | filter:{gname:cx} |orderBy:px" align="center">
<td>{{s.gid}}</td>
<td>{{s.gname}}</td>
<td>
<button ng-click="count(+1,s.gname)">+</button>
<input style="width: 30px;" ng-model="s.gnum" />
<button ng-click="count(-1,s.gname)">-</button>
</td>
<td>{{s.gprice}}</td>
<td>{{s.gnum*s.gprice}}</td>
<td><input type="checkbox" ng-model="s.xz" /></td>
</tr>
</tbody>
</table><br />
<button style="background-color: green; margin-right: 45px; margin-left: 45px;">商品總數{{sum()}}</button>
<button style="background-color: green; margin-right: 45px;">商品總價{{snum()}}</button>
<button style="background-color: yellow; margin-right: 45px;" ng-click="qk()" ng-model="del">清空購物車</button>
<button style="background-color: yellow; margin-right: 45px;" ng-click="sc()" ng-model="ss">刪除</button>
</center>
</body>
</html>