购物车

最新推荐文章于 2018-05-05 18:24:54 发布

ytuiihnj

最新推荐文章于 2018-05-05 18:24:54 发布

阅读量177

点赞数

CC 4.0 BY-SA版权

文章标签： angular

本文链接：https://blog.youkuaiyun.com/tianpenggg/article/details/79722606

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script src="js/angular.min.js"></script>
       <script>
           var app= angular.module("gaoynapp",[]);
           app.controller("ctrl",function($scope){
               //创建数据
               $scope.goods=[{"gid": 001,"gname": "手机","gnum": 3,"gprice": 1000,"gcount": 3000 }, { "gid": 002,"gname": "电脑","gnum": 3,"gprice": 2000,"gcount": 6000 }, { "gid": 003,"gname": "电视","gnum": 6,"gprice": 500,"gcount": 3000 }];


               //计算所有的商品数量
               $scope.count=function(){
                   var num=0;
                   for(var i=0;i<$scope.goods.length;i++){
                       num=num+$scope.goods[i].gnum;
                   }
                   return num;
               }
               //计算所有的商品数量
               $scope.sumhe=function(){
                   sum=0;
                   for(var i=0;i<$scope.goods.length;i++){
                       sum=sum+($scope.goods[i].gnum*$scope.goods[i].gprice);
                   }
                   return sum;
               }
               //验证--删除
               $scope.del=function(name){
                   for(var i=0;i<$scope.goods.length;i++){ //双向绑定：当scope上的数据发生变化时候，视图中所有的scope对象自动发生变化
                       if($scope.goods[i].gname==name){
                           $scope.goods.splice(i,1);
                       }
                   }
               }
               //点击减号时候，找当当前商品---判断数量1---如果为1直接从购物车列表中删除
               $scope.jian=function(name){
                   for(var i=0;i<$scope.goods.length;i++){ //双向绑定：当scope上的数据发生变化时候，视图中所有的scope对象自动发生变化
                       if($scope.goods[i].gname==name&&$scope.goods[i].gnum==0){
                           var f= confirm("是否把商品从购物成中移除？");
                           if(f){
                               $scope.goods.splice(i,1);
                           }
                       }else if($scope.goods[i].gname==name){
                           $scope.goods[i].gnum--;
                       }
                   }
               }

           });
       </script>
   </head>
   <body ng-app="gaoynapp" ng-controller="ctrl">
       <h1>我的购物车详情</h1>
       <table border="1px">
           <tr>
               <td colspan="6">
                   <input type="text" ng-model="g_name" placeholder="根据名称进行查询" />
               </td>

           </tr>
           <tr>
               <td ng-click="px='+gid'">商品编号</td>
               <td>商品名称</td>
               <td>商品数量</td>
               <td ng-click="px='-gprice'">商品单价</td>
               <td>价格小计</td>
               <td>操作</td>
           </tr>
           <tr ng-repeat="g in goods|orderBy:px|filter:{gname:g_name}">
               <td>{{g.gid}}</td>
               <td>{{g.gname}}</td>
               <td><button ng-click="g.gnum=g.gnum+1">+</button> <input ng-model="g.gnum" type="number" /> <button ng-click="jian(g.gname)">-</button> </td>
               <td>{{g.gprice}}</td>
               <td>{{g.gnum*g.gprice}}</td> 
               <td><button ng-click="del(g.gname)">删除</button></td>
           </tr>
       </table>
       <button>商品总数{{count()}}</button>
       <button>商品总价{{sumhe()}}</button>
       
       <button ng-click="goods=[]">清空购物车</button>
   </body>
</html>