先上效果图：
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 一个多功能购物车就完成了
