Angular实现购物车

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script src="../../../js文件/angular.min.js"></script>
<script>

var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope,$http){
/*$http.get("http://result.eolinker.com/TRFqLf402814d04c74641c1f3895afde6c8c9af19a2297b?uri=result").then(function(response){
$scope.goods = response.data;
});*/
$scope.flag1 = true;
$http.get("demo.json").then(function(response){
$scope.goods = response.data;
});
$scope.selectKey = "";
$scope.orderKey1 = "";
$scope.orderKey2 = "";
var flag = true;
$scope.order = function(){
if(flag){
$scope.orderKey1 = "-gid";
flag = false;
}else{
$scope.orderKey1 = "gid";
flag = true;
}
}
$scope.del = function(gname){
if(confirm("是否删除此条数据?")){
for(var i = 0;i<$scope.goods.length;i++){
if ($scope.goods[i].gname == gname) {
$scope.goods.splice(i,1);
break;
}
}
}

}
$scope.getTotal = function(){
var t = 0;
for(var i = 0;i<$scope.goods.length;i++){
t = t + $scope.goods[i].gnum * $scope.goods[i].gprice;
}
return t;
}

$scope.sum = function(){
var y = 0;
for(var i = 0;i<$scope.goods.length;i++){
y = y + $scope.goods[i].gnum;
}
return y;
}
$scope.jian = function(index){
var num = $scope.goods[index].gnum;
if(num > 1) {
$scope.goods[index].gnum--;
} else {
var f = confirm("是否删除此商品?");
if(f) {
$scope.goods.splice(index, 1);
}
}
}
$scope.clear = function() {
$scope.goods = [];
$scope.flag1 = false;
}

});
</script>
<style>
.eve{
background-color:green ;
}
.odd{
background-color: pink;
}
#tr1{
background-color: gray;
}
</style>
<body ng-app="myApp" ng-controller="myCtrl">
<input type="text" placeholder="根据名称查询" ng-model="selectKey" />
<input type="button" value="清空购物车" ng-click="clear()" />
<table border="1">
<tr id = "tr1">
<td ng-click="order()">商品编号</td>
<td>商品名称</td>
<td>商品数量</td>
<td>商品单价</td>
<td>
价格小计
<select ng-model="orderKey2">
<option value=""></option>
<option value="gcount">▲</option>
<option value="-gcount">▼</option>
</select>
</td>
<td>操作</td>
</tr>
<tr ng-repeat="g in goods | filter:selectKey | orderBy:orderKey1 |orderBy:orderKey2" class="{{$index%2? 'eve':'odd'}}">
<td>{{g.gid}}</td>
<td>{{g.gname}}</td>

<td>
<input type="button" value="+" ng-click="g.gnum = g.gnum+1"/>
<input type="text" value="{{g.gnum}}" />
<input type="button" value="-" ng-click="jian($index)" />
</td>
<td>{{g.gprice |currency:"￥"}}</td>
<td>{{g.gnum * g.gprice}}</td>
<td>
<input type="button" value="移除" ng-click="del(g.gname)" />
</td>
</tr>
</table>
<span ng-show="flag1">商品总数:{{sum()|currency:"￥"}}</span>
<span ng-show="flag1">商品总价:{{getTotal()|currency:"￥"}}</span>
</body>
</html>

猜你喜欢