<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <style>@import "../css/YueKaoTest.css";</style> <script type="text/javascript"src="../wrap/Angular-1.4.6.js"></script> <script type="text/javascript"src="../wrap/ShoppingCart.js"></script> <title></title> </head> <body ng-app="myapp" ng-controller="myctr"> <div class="total"> <h1>我的购物车</h1> <hr/> <div class="l"> <button class="tj" ng-click="adds($index)"> 添加物品 </button> <button class="qc" ng-click="deles($index)"> 清空购物车 </button> <select ng-model="orb"> <option value="">升序</option> <option value="price">降序</option> </select> </div> <table border="1"> <tr> <td width="60px"> <input type="checkbox" ng-model="all" /> <span ng-bind="all ? '取消' : '全选'"></span> </td> <td width="90px">ID</td> <td width="90px">物品名</td> <td width="120px">价 格</td> <td width="160px">数量</td> <td width="120px">小计</td> <td width="120px">操作</td> </tr> <tr ng-repeat="d in data|orderBy:orb"> <td width="45px"><input type="checkbox" ng-model="c" ng-checked="all"/></td> <td width="90px">{{$index}}</td> <td width="90px">{{d.uname}}</td> <td width="120px">{{d.price | currency:"¥"}}</td> <td width="160px" ng-model="number"> <input type = "button" ng-click = "change($index,-1)" value="-"/> {{d.number}} <input type = "button" ng-click = "change($index,1)" value="+"/> <td width="120px">{{d.price*d.number}}</td> <td width="120px"><button ng-click="mdele($index)" class="number">删除</button ></td> </tr> <tr ng-show="shows"> <td width="45px" colspan="6">总计:{{allprice()}}</td> </tr> </table> <div class="c" ng-show="addshow"> <div class="t"> <h4>添加(以下都是必填项)</h4> 物品名:<input ng-model="gname" type="text" /><br/> 价 格: <input ng-model="gprice" class="a"type="text" /><br/> 数 量: <input ng-model="gnumber" class="a"type="text" /><br/> <button ng-click="yin($index)" class="adds">添加</button> </div> </div> </div> <script type="text/javascript"> var app = angular.module("myapp",[]); app.controller("myctr",function($scope){ $scope.shows=true; //添加数据 $scope.data=data; //清空购物车 $scope.deles=function($index){ $scope.shows=false; $scope.data.splice($index); confirm("是否清空购物车"); } //删除数据 $scope.mdele=function($index){ $scope.data.splice($index,1); } //点击加 $scope.jia=function(){ $scope.number=number+1 } //总价格的计算 $scope.allPrices=function(){ $scope.allprice=0; angular.forEach($scope.data,function(d,index,array){ data.price=data.number*data.price; if($scope.c==true){ $scope.allprice+=parseInt(d.price); } }) return $scope.allprice; }; //添加隐藏与现实 $scope.addshow=false; $scope.adds=function(){ $scope.addshow=true; } $scope.yin=function($index){ $scope.addshow=false; if($scope.gname==undefined||$scope.gname==""){ alert("物品名不能为空!"); return $scope.addshow=true; } if(!/^\d+$/.test($scope.gprice)||$scope.gprice==undefined||$scope.gprice==""){ alert("价格不能为数字 不能为空!"); return $scope.addshow=true; } if(!/^\d+$/.test($scope.gnumber)||$scope.gnumber==undefined||$scope.gnumber==""){ alert("数量不能为数字 不能为空!"); return $scope.addshow=true; } $scope.data.splice($index+1,0,{ uname:$scope.gname, price:$scope.gprice, number:$scope.gnumber }); $scope.gname="", $scope.gprice="", $scope.gnumber="" }; }); </script> </body> </html>
Angular购物车模拟
最新推荐文章于 2019-05-02 22:05:48 发布