angularjs购物车功能（全）包含 （修改，添加等功能）
先上效果图：
css代码较为简单 这里的css主要是为了修改模拟窗口，和添加数据模拟窗口：
.shop{
width: 500px;
height: 300px;
background: #E5E5E5;
margin: 0 auto;
}
.shop p{
width: 450px;
height: 30px;
margin: 0 auto;
margin-top: 20px;
}
.shop p input{
width: 300px;
height: 30px;
}html代码如下
<body ng-app="myApp" ng-controller="myCtrl">
<button ng-click="all()">全选</button>
<button ng-click="fx()">反选</button>
<button ng-click="qbx()">全不选</button>
<button ng-click="delAll()">清空购物车</button>
<button ng-click="dx(price)">价格倒序</button>
<button ng-click="pidel()">批量删除</button>
<button ng-click="fanc()">添加商品</button>
<input type="text" placeholder="查找商品" ng-model="search" />
<table width="100%" border="3">
<tr>
<td></td>
<td>name</td>
<td>price</td>
<td>number</td>
<td>总价</td>
<td>删除</td>
</tr>
<tr ng-repeat="x in goods|orderBy:order+orderType | filter : {name:search}">
<td><input ng-model="x.ck" type="checkbox" /> </td>
<td>{{x.name}}</td>
<td>{{x.price | currency }}</td>
<td>
<button ng-click="jian($index)">-</button>
<input type="text" value="{{x.number}}" />
<button ng-click="jia($index)">+</button>
</td>
<td>{{x.price * x.number | currency}}</td>
<td><input ng-click="del($index)" type="button" value="删除" />
<input ng-click="xiu($index)" type="button" value="修改" />
</td>
</tr>
<tr>
<td>总价格 ：<span ng-bind="allsum() | currency"></span></td>
</tr>
</table>
<!--添加数据相关-->
<div class="shop" ng-show="add_show">
<p>商品： <input ng-model="shops" type="text" placeholder="请输入商品名字" /></p>
<p>价格：<input ng-model="prices" type="number" placeholder="请输入商品价格" /></p>
<p>数量：<input ng-model="nums" type="number" placeholder="请输入商品数量" /></p>
<p><button ng-click="trueAdd()">确认添加</button></p>
</div>
<!--修改相关-->
<div class="shop" ng-show="xiu_show">
<p>商品： <input ng-model="prod.name" type="text" placeholder="请输入商品名字" /></p>
<p>价格：<input ng-model="prod.price" type="number" placeholder="请输入商品价格" /></p>
<p>数量：<input ng-model="prod.number" type="number" placeholder="请输入商品数量" /></p>
<p><button ng-click="save()">保存数据</button></p>
</div>
</body>js代码如下：
var vm=angular.module("myApp" , [])
vm.controller("myCtrl",function($scope,$http){
$http.get("gouwucar.json").then(function(response){
$scope.goods=response.data
// 商品数量的加减
$scope.jian=function(index){
if ($scope.goods[index].number>1) {
$scope.goods[index].number--
} else {
$scope.goods[index].number =1
}
}
$scope.jia=function(index){
$scope.goods[index].number++
}
//删除条目
$scope.del=function(index){
if (confirm("确定删除")) {
$scope.goods.splice(index,1)
}
}
//总价格计算
$scope.allsum=function(){
var allPrice=0
for (var i=0 ; i<$scope.goods.length ; i++) {
allPrice+=$scope.goods[i].price * $scope.goods[i].number
}
return allPrice;
}
//全选
$scope.all=function(){
for (i=0 ; i<$scope.goods.length; i++) {
var x= $scope.goods[i]
if (x.ck==x.ck) {
x.ck=true
}
}
}
// 反选
$scope.fx=function(){
for(i=0 ; i<$scope.goods.length ; i++){
var x=$scope.goods[i]
if (x.ck==x.ck) {
x.ck = !x.ck
}
}
}
// 全不选
$scope.qbx=function(){
for (var i=0 ; i<$scope.goods.length ; i++) {
var x=$scope.goods[i]
if (x.ck==x.ck) {
x.ck=false
}
}
}
//清空购物车
$scope.delAll=function(){
if ($scope.goods.length == 0) {
alert("您的购物车已清空")
} else{
$scope.goods=[]
}
}
// 价格倒序
$scope.order=""
$scope.dx=function(type){
$scope.orderType=type
if ($scope.order=="") {
$scope.order="-"
} else{
$scope.order=""
}
}
// 批量删除
$scope.pidel=function(){
for (var i= 0 ;i<$scope.goods.length ; i++) {
if ($scope.goods[i].ck==true) {
$scope.goods.splice(i,1)
i--;
}
}
}
//添加
//点击添加按钮弹出添加框
$scope.fanc=function(){
$scope.add_show=true
}
//点击确认添加按钮
$scope.trueAdd=function(){
//获取输入框中的内容
var shop=$scope.shops
var prices=$scope.prices
var num =$scope.nums
//数据添加
$scope.goods.push({
name:shop,
price:prices,
number:num
})
//清空输入的数据
$scope.shops=""
$scope.prices=""
$scope.nums=""
}
//数据修改
//定义一个空对象 , 用于更新和保存数据时临时存储
$scope.prod = {};
// 定义一个索引值
var idx=-1
//定义一个点击按钮时触发的事件，用于单击后弹出模块窗口用于修改数据
$scope.xiu=function($index){
//显示窗口
$scope.xiu_show=true
//将选中行的数据绑定到临时对象prod中，在下面的模态窗口中展示出来
$scope.prod.name=$scope.goods[$index].name
$scope.prod.price=$scope.goods[$index].price
$scope.prod.number=$scope.goods[$index].number
//选中行的索引赋值给全局变量idx
idx=$index
}
//定义一个单机保存按钮时触发的事件,
$scope.save=function(){
//将修改后的值赋给数组
$scope.goods[idx].name=$scope.prod.name
$scope.goods[idx].price=$scope.prod.price
$scope.goods[idx].number=$scope.prod.number
//关闭窗口
$scope.xiu_show=false
}
})
})json数据如下
[
{"name":"小米","price":12,"number":2},
{"name":"大米","price":23,"number":1},
{"name":"黑米","price":24,"number":1},
{"name":"糯米","price":18,"number":5}
]
```
ok 一个多功能购物车就完成了本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2024-02-29，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
