<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="libs/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="libs/angular.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
thead{
background: gray;
}
tbody tr:nth-child(even){
background-color: deeppink;
}
tbody tr:nth-child(odd){
background-color: green;
}
.main{
text-align: center;/*塊元素不會居中*/
width: 50%;
margin: 0 auto;
}
#input_search{
float: right;
margin-bottom: 10px;
}
#input_clear{
float: right;
background: yellow;
border-radius: 5px;
border: 1px solid gainsboro;
padding: 2px;
margin-top: 10px;
}
.cal{
float: left;
background-color: green;
border: 2px solid gray;
margin-right: 20px;
margin-top: 10px;
}
</style>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<div class="main">
<h2>我的購物車詳情</h2>
<p><input type="text" name="" id="input_search" value="" placeholder="根據名稱查詢" ng-model="searchKey"/></p>
<table border="1" cellspacing="0" cellpadding="0" width="100%">
<thead>
<tr>
<th ng-click="orderbyId()">商品編號<img src="{{picUrl}}"/></th>
<th>商品名稱</th>
<th>商品數量</th>
<th>商品單價</th>
<th ng-click="orderbyCount()">價格小計<img src="{{picUrl}}"/></th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat=" x in goods|filter:{name:searchKey}|orderBy:orderKey">
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td>
<input type="button" id="" value="-" ng-model="" ng-click="reduceNums($index)" />
<input type="text" id="" ng-model="x.nums" />
<input type="button" id="" value="+" ng-model="" ng-click="increaseNums($index)" />
</td>
<td>{{x.price}}</td>
<td>{{x.count=x.nums*x.price}}</td>
<td><input type="button" id="" value="移除" ng-click="removeGoods(x.name)" /></td>
</tr>
</tbody>
</table>
<div>
<span id="g_totalCount" class="cal">商品總數是：{{getTotalNum()}}</span>
<span id="g_totalprice" class="cal">商品總價是：{{getTotalPrice()}}</span>
<input type="button" id="input_clear" value="清空購物車" ng-click="clearGoods()" />
</div>
</div>
<script type="text/javascript">
var app=angular.module("myapp",[]);
app.controller("myctrl",function($scope,$http){
$http({
method:"GET",
url:"mydata.json"
}).then(function success(response){
$scope.goods=response.data;
},function error(response){
});
//初使化
$scope.num=0;
//排序關鍵字
$scope.orderKey="";
//是否是第一次點擊
$scope.isFirstClick=true;
//初使化圖片
$scope.picUrl="img/top.png";
// $scope.goods=[
// {id:"001",name:"手機",price:1000,nums:1},
// {id:"002",name:"電腦",price:2000,nums:1},
// {id:"004",name:"電視",price:500,nums:1},
// {id:"003",name:"鼠標",price:90,nums:1}];
//根據id排序
$scope.orderbyId=function(){
if($scope.isFirstClick){
$scope.orderKey="id";
$scope.isFirstClick=false;
$scope.picUrl="img/top.png";
}else{
$scope.orderKey="-id";
$scope.isFirstClick=true;
$scope.picUrl="img/bottom.png";
}
}
//根據商品小計排序
$scope.orderbyCount=function(){
if($scope.isFirstClick){
$scope.orderKey="count";
$scope.isFirstClick=false;
$scope.picUrl="img/top.png";
}else{
$scope.orderKey="-count";
$scope.isFirstClick=true;
$scope.picUrl="img/bottom.png";
}
}
$scope.orderFunc=function(v1,v2){
return v1*v2;
}
$scope.removeGoods=function(gname){
for (var i = 0; i <$scope.goods.length; i++) {
if($scope.goods[i].name==gname){
$scope.goods.splice(i,1);
break;
}
}
}
$scope.clearGoods=function(){
//清空所有購物車數據
$scope.goods=[];
}
//計算總數量
$scope.getTotalNum=function(){
var totalNum=0;
for (var i = 0; i < $scope.goods.length; i++) {
totalNum+=$scope.goods[i].nums;
}
return totalNum;
}
//計算總價格
$scope.getTotalPrice=function(){
var totalPrice=0;
for (var i = 0; i < $scope.goods.length; i++) {
totalPrice+=($scope.goods[i].price*$scope.goods[i].nums)
}
return totalPrice;
}
//數量減少
$scope.reduceNums=function(index){
// alert(index);
$scope.goods[index].nums--;
if($scope.goods[index].nums < 1){
var c=confirm("確定要刪除該產品嗎？");
if(c){
$scope.goods.splice(index,1);
}
}
}
//數量增加
$scope.increaseNums=function(index){
$scope.goods[index].nums++;
}
});
</script>
</body>
</html>
---------------------------解析json
[
{"id":"005",
"name":"手機",
"nums":3,
"price":1000,
"count":3000
},
{"id":"002",
"name":"電腦",
"nums":3,
"price":2000,
"count":6000
},
{"id":"003",
"name":"電視",
"nums":6,
"price":500,
"count":3000
}
]