<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/angular.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<script type="text/javascript">
var app=angular.module("myapp",[]).controller("myctrl",function ($scope,$http) {
$http.get("goods.json").then(function (success) {
$scope.goods=success.data;
});
$scope.flag=true;
$scope.nums=function () {
var nums=0;
for (var i = 0; i < $scope.goods.length; i++) {
nums+=$scope.goods[i].gnum;
}
return nums;
}
$scope.yc=function (i) {
if(confirm("您确定要移除該資料嗎？"))
{
$scope.goods.splice(i,1);
alert("移除成功！");
}
}
$scope.totals=function () {
var totals=0;
for (var i = 0; i < $scope.goods.length; i++) {
totals+=$scope.goods[i].gnum*$scope.goods[i].gprice;
}
return totals;
}
$scope.remove=function () {
$scope.goods=[];
$scope.flag=false;
}
$scope.t=function (i) {
if($scope.goods[i].gnum<1){
if(confirm("您确定要移除該資料嗎？"))
{
$scope.goods.splice(i,1);
alert("移除成功！");
}else{
$scope.goods[i].gnum=1;
}
}
}
});
</script>
<body ng-app="myapp" ng-controller="myctrl">
<input type="text" placeholder="根據名稱查詢" ng-model="gname" ng-show="flag"/>
<table cellspacing="0" cellpadding="0" width="70%" ng-show="flag">
<tr>
<td>商品編号<button ng-click="px='gid';aa=!aa">▲</button></td>
<td>商品名稱</td>
<td>商品數量</td>
<td>商品單價</td>
<td>價格小計<button ng-click="px='gprice*gnum';aa=!aa">▲</button></td>
<td>操作</td>
</tr>
<tr ng-repeat="g in goods|filter:gname|orderBy:px:aa">
<td>{{g.gid}}</td>
<td>{{g.gname}}</td>
<td><input type="number" ng-model="g.gnum" ng-change="t($index)"/></td>
<td>{{g.gprice}}</td>
<td>{{g.gnum*g.gprice}}</td>
<td><button ng-click="yc($index)">移除</button></td>
</tr>
</table>
<span ng-show="flag">商品總數：{{nums()}}</span>
<span ng-show="flag">商品總價：{{totals()}}</span>
<button ng-click="remove()" ng-show="flag">清空購物車</button>
</body>
</html>
![任務管理器Win10任務管理器報系統中斷[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)