基础东西

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
       <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
       <style type="text/css">
           .greenline{
               background-color: greenyellow;
           }
           .pinkline{
               background-color: deeppink;

           }

       </style>
   </head>
   <body ng-app="myapp" ng-controller="myctrl">
       <center>

           <h1>我的购物车详情</h1>
           <input type="" style="background-color: yellow; border-radius: 10px;" placeholder="根据名称查询" ng-model="keyy" /><br /><br />
           <table border="1" cellpadding="0" cellspacing="0" width="40%">
               <tr style="background-color: gray;">
                   <th>商品编号</th>
                   <th>商品名称</th>
                   <th>商品数量</th>
                   <th>商品单价
                   <input type="button" value="^" ng-click="dan()" />
                   <input type="button" value="v" ng-click="gr()"/>

                   </th>
                   <th>价格小计</th>
                   <th>操作</th>
               </tr>
               <tr ng-repeat="x in shops|filter:{name:keyy}|orderBy:pai" class="{{$index%2==0?'greenline':'pinkline'}}" style="text-align: center;">
                   <td>{{x.id}}</td>
                   <td>{{x.name}}</td>
                   <td>
                       <input type="button" value="+" style="background-color: gray;" ng-click="up(x.id)" />
                       {{x.num}}
                       <input type="button" value="-" style="background-color: gray;" ng-click="down(x.id)" />
                   </td>
                   <td>{{x.price}}</td>
                   <td>{{(x.num*x.price)}}</td>
                   <td><input type="button" value="移除" style="background-color: yellow;" ng-click="del(x.id)" ></td>

               </tr>

           </table><br /><br />
           <input type="button" value="商品数量" style="background-color:forestgreen;"/>{{he()}}      
           <input type="button" value="商品总价" style="background-color:forestgreen;"/>{{jia()}}      
           <input type="button" value="清空购物车" style="background-color: yellow;" ng-click="delall()" />
       </center>
       <script type="text/javascript">
           var app=angular.module("myapp",[]);
           app.controller("myctrl",function($scope){
               $scope.shops=[{id:"001",name:"手机",num:3,price:1000,count:3000},
               {id:"002",name:"电脑",num:3,price:2000,count:6000},
               {id:"003",name:"电脑",num:6,price:500,count:3000}];

               $scope.del=function(id){
                   for (var i = 0; i < $scope.shops.length; i++) {
                       if($scope.shops[i].id==id){
                           $scope.shops.splice(i,1);break;
                       }
                   }

               }
               $scope.he=function(){
                   var he=0;
                   for (var i = 0; i < $scope.shops.length; i++) {
                       he+=$scope.shops[i].num;
                   }
                   return he;
               }
               $scope.jia=function(){
                   var jia=0;
                   for (var i = 0; i < $scope.shops.length; i++) {
                       jia+=$scope.shops[i].price;
                   }
                   return jia;
               }
               $scope.delall=function(){
                   confirm("确定要清空购物车吗?");
                   $scope.shops=[];

               }
               $scope.up=function(id){
                   for (var i = 0; i < $scope.shops.length; i++) {
                       if($scope.shops[i].id==id){
                           $scope.shops[i].num++;
                       }
                   }

               }
               $scope.down=function(id){
                   for (var i = 0; i < $scope.shops.length; i++) {


                           if($scope.shops[i].num<1){

                               alert("再减少就要删除了");
                               $scope.shops.splice(i,1);
                               break;
                           }


                       if($scope.shops[i].id==id){
                           $scope.shops[i].num--;
                       }
                   }

               }
               $scope.dan=function(){
                   $scope.pai="price";

               }
               $scope.gr=function(){
                   $scope.pai="-price";
               }

           })

       </script>

   </body>
</html>

猜你喜欢