本文介绍了一个使用Angular开发的简易购物车应用案例。该应用能够实现商品添加、数量修改及删除等功能，并能计算购物车中商品的总价。通过此示例可以了解Angular在实际项目中的具体运用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../swipter/angular.min.js"></script>
<script>
var myapp=angular.module("myapp",[]);
myapp.controller("myCtrl",function ($scope) {
$scope.goods=[{ name:'笔',num:1,price:101 },
{ name:'杯子',num:1,price:101 },
{ name:'项链',num:1,price:101 },
{ name:'手机',num:1,price:101 },
{ name:'钱包',num:1,price:101 },
{ name:'腰带',num:1,price:101 }];
$scope.date=[{ name:'鼠标',num:1,price:101 },
{ name:'键盘',num:3,price:601 },
{ name:'主机',num:1,price:3001 }]
$scope.inde;
$scope.addgoods=function (index) {
if($scope.inde==index){
$scope.date[$scope.date.length-1].num++
}else{ $scope.date.push({name:$scope.goods[index].name,num:$scope.goods[index].num,price:$scope.goods[index].price}); }
$scope.inde=index;
}
$scope.delete=function(index) {
console.log(0);
$scope.date.splice(index,1);
}
$scope.allmoney=function () {
$scope.all=0;
for(var i=0;i<$scope.date.length;i++){
$scope.all+=$scope.date[i].num*$scope.date[i].price;
}
}
$scope.jiannum=function (index) {
$scope.date[index].num--;
}
$scope.jianum=function (index) {
$scope.date[index].num++;
}
$scope.clearall=function () {//
$scope.date.splice(0,$scope.date.length);
$scope.date.length=0;
}
});
</script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<table>
<thead>
<th>名字</th>
<th>价格</th>
</thead>
<tbody>
<tr ng-repeat="item in goods">
<td>{{item.name}}</td>
<td>{{item.num}}</td>
<td><button ng-click="addgoods($index)">添加购物车</button></td>
</tr>
</tbody>
</table>
<h2>您的购物车</h2>
<table>
<thead>
<th>商品名称</th>
<th>数量</th>
<th>单价</th>
<th>小计</th>
</thead>
<tbody>
<tr ng-repeat="item in date">
<td>{{item.name}}</td>
<td><button ng-click="jiannum($index)">-</button>{{item.num}}<button ng-click="jianum($index)">+</button></td>
<td>{{item.price|currency:'RMB￥'}}</td>
<td>{{item.price*item.num|currency:'RMB￥'}}</td>
<td><button ng-click="delete($index)">删除</button></td>
</tr>
<tr>
<td><button ng-click="allmoney()">计算总金额</button></td>
<td>{{all}}</td>
<td><button ng-click="clearall()">清空</button></td>
</tr>
</tbody>
</table>
</body>
</html>
扫一扫
1040
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
