混合开发之购物车

<!DOCTYPE html>
<html ng-app="myApp">
   <head>
       <meta charset="utf-8" />
       <title></title>
       <script type="text/javascript" src="libs/angular.min.js" ></script>
       <script type="text/javascript" src="libs/jquery-1.11.0.min.js" ></script>

       <script>

           var myApp=angular.module("myApp",[]);
           myApp.controller("MyCtra",function($scope,$http){

               $scope.list=[
                   { "gid": 001, "gname": "手机", "gnum": 3, "gprice": 1000, "gcount": 3000,"flag":false },
                    { "gid": 002, "gname": "电脑", "gnum": 3, "gprice": 2000, "gcount": 6000,"flag":false },
                    { "gid": 003, "gname": "电视", "gnum": 6, "gprice": 500, "gcount": 3000,"flag":false }
               ]


           //定义排序变量
           $scope.order = "";

           //定义改变复选框选中状态的方法
           $scope.boxChan = function(index){

               if($scope.list[index].flag){
                   $scope.list[index].flag = false;
               }else{
                   $scope.list[index].flag = true;
               }
           }

           //定义删除的方法
           $scope.remove = function(){

               for (var i = 0; i < $scope.list.length; i++) {
                   while(true){
                       if($scope.list[i].flag){
                           $scope.list.splice(i,1);
                       }else{
                           break;
                       }
                   }
               }
           }

           //定义清空购物车的方法
           $scope.removeAll = function(){
               $scope.list = [];
           }

           //数量改变是调用的方法
           $scope.chan = function(index){
               if($scope.list[index].gnum <=0){
                   if(confirm("确定要删除此产品吗？")){
                       $scope.list.splice(index,1);
                   }else{
                       $scope.list[index].gnum = 1;
                   }
               }
           }

           //定义一个算出总价的方法
           $scope.prices = function(){
               price = 0;
               for (var i = 0; i < $scope.list.length; i++) {
                   price += $scope.list[i].gprice * $scope.list[i].gnum;
               }
               return price;
           }

           //定义算出总数量的方法
           $scope.nums = function(){
               num = 0;
               for (var i = 0; i < $scope.list.length; i++) {
                   num += $scope.list[i].gnum;
               }
               return num;
           }



       });



       </script>

       <style type="text/css">
           .css1{
               background: deepskyblue;
           }
           .css2{
               background: greenyellow;
           }

           .kuang{
               border-radius: 20px;
               margin-left: 300px;
               margin-bottom: 20px;
           }

       </style>



   </head>
   <body ng-controller="MyCtra">
       <center>
           <h1>我的购物车</h1>
           <input type="text" ng-model="name" placeholder="根据姓名查询" class="kuang"/><br />
           <table border="1 soild red" cellpadding="1" cellspacing="0" width="50%">
               <tr style="background: deeppink;" align="center">
                   <td>商品编号<input type="button" ng-click="order = 'gid' " value="∧" style="background: deepskyblue;border: 0px;"></td>
                   <td>商品名称</td>
                   <td>商品数量</td>
                   <td>商品单价</td>
                   <td>价格小计<input type="button" value="∨" ng-click="order = '-gprice*gnum'" style="background: deepskyblue;border: 0px;"></td>
                   <td>操作</td>
               </tr>
               <tr align="center" ng-repeat="li in list|filter:name|orderBy:order " class="{{$even?'css1':'css2'}}">
                   <td>{{li.gid}}</td>
                   <td>{{li.gname}}</td>
                   <td><input type="number" ng-change="chan($index)" ng-model="li.gnum"/></td>
                   <td>{{li.gprice}}</td>
                   <td ng-bind="li.gprice * li.gnum"></td>
                   <td><input type="checkbox" ng-click="boxChan($index)"/></td>
               </tr>
               <tr align="center">
                   <td colspan="2" style="background: sandybrown;">商品总数:<span ng-bind="nums()"></span></td>
                   <td style="background: limegreen;"></td>
                   <td style="background: limegreen;">商品总价:<span ng-bind="prices()"></span></td>
                   <td><input style="background: magenta;border-radius: 10px; border: 0;" type="button" value="清空购物车" ng-click="removeAll()"/></td>
                   <td><input style="background: magenta;border-radius: 10px; border: 0;" type="button" value="删除" ng-click="remove()"/></td>

               </tr>
           </table>


       </center>
   </body>
</html>

混合开发之购物车

猜你喜欢