简单的angular购物车

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <style>
           #add input{
               display: block;
           }
       </style>
       <script src="js/angular.js"></script>
       <script>
           var app = angular.module("myApp",[]);
           app.controller("myCtrl",function($scope){
               $scope.products = [{
                   id:1,
                   pname:"qq",
                   aprice:12.9,
                   num:2,
                   state:false
               },{
                   id:2,
                   pname:"wx",
                   aprice:23.9,
                   num:1,
                   state:false
               },{
                   id:3,
                   pname:"wx",
                   aprice:99.9,
                   num:1,
                   state:false
               }];

               $scope.search = "";

               //删除
               $scope.isshow = true;
               $scope.del = function(clumn){
                   for(index in $scope.products){
                       if($scope.products[index].id == clumn){
                           $scope.products.splice(index,1);
                       }
                       if($scope.products.length==0){
                           $scope.isshow = false;
                       }
                   }
               }

               //计算总价
               $scope.allPirce = function(){
                   $scope.a = 0;
                   for(index in $scope.products){
                       $scope.a = $scope.products[index].aprice * $scope.products[index].num + $scope.a;
                   }
                   return $scope.a;
               };

               //下拉菜单排序
               $scope.checkOrder = "";
               $scope.changeOrder = function(){
                   if($scope.checkOrder == ""){

                   }
                   else if($scope.checkOrder == "num"){
                       $scope.orderFlag = "";
                       $scope.orderClumn = "num";
                   }
                   else{
                       $scope.orderFlag = "-";
                       $scope.orderClumn = "num";
                   }
               };

               //减商品数量的操作
               $scope.less = function(id){
                   for(index in $scope.products){
                       if(id == $scope.products[index].id){
                           if($scope.products[index].num>1){
                               $scope.products[index].num--;
                           }
                           else{
                               if(confirm("您确定删除吗?")){
                                   $scope.products.splice(index,1);
                               }
                           }
                       }
                   }
               };

               //商品入库
               $scope.add = function(){
                   var p = {
                       pname: $scope.add_name,
                       aprice: parseInt($scope.add_price),
                       num: parseInt($scope.add_num)
                   };
                   $scope.products.push(p);
                   $scope.add_name = "";
                   $scope.add_price = "";
                   $scope.add_num = "";
                   $scope.formShow = false;
               };

               //全选、全不选
               $scope.checkAll = false;
               $scope.checkAllFun = function(){
                   if($scope.checkAll){
                       for(index in $scope.products){
                           $scope.products[index].state = true;
                       }
                   }
                   else{
                       for(index in $scope.products){
                           $scope.products[index].state = false;
                       }
                   }
               };

               //批量删除
               $scope.plDel = function(){
                   var arr = [];
                   for(index in $scope.products){
                       if($scope.products[index].state){
                           arr.push($scope.products[index]);
                       }
                   }
                   if(arr.length<=0){
                       alert("请选择您要删除的选项!");
                   }
                   else{
                       if(confirm("您确认要删除此项吗?")){
                           for(index1 in arr){
                               for(index2 in $scope.products){
                                   if(arr[index1].id == $scope.products[index2].id){
                                       $scope.products.splice(index2,1);
                                   }
                               }
                           }
                       }
                   }
               }
           })
       </script>
   </head>
   <body ng-app="myApp" ng-controller="myCtrl">
       <center>
           <h2>我的购物车</h2>
           <input type="text" placeholder="输入关键字搜索..." ng-model="search"/>
           <select ng-model="paixu">
               <option value="">-------排序-------</option>
               <option value="num">按数量正序排序</option>
               <option value="-num">按数量倒序排序</option>
           </select>
           <button style="background-color: chartreuse; border: hidden;" ng-click="formShow=true">入库</button>
           <button style="background-color: red; border: hidden;" ng-click="plDel()">批量删除</button><br /><br />
           <table border="1px" cellpadding="10" cellspacing="0" ng-show="isshow">
               <thead align="center">
                   <tr>
                       <th><input type="checkbox" ng-model="checkAll" ng-click="checkAllFun()"/></th>
                       <th>name</th>
                       <th>price</th>
                       <th>number</th>
                       <th>totalPrice</th>
                       <th>option</th>
                   </tr>
               </thead>
               <tbody>
                   <tr ng-repeat="pro in products | filter:{pname:search} | orderBy:paixu" align="center">
                       <td><input type="checkbox" ng-model="pro.state"/></td>
                       <td>{{pro.pname}}</td>
                       <td>{{pro.aprice | currency:"￥"}}</td>
                       <td><button ng-click="less(pro.id)">-</button>{{pro.num}}<button ng-click="pro.num = pro.num + 1">+</button></td>
                       <td>{{pro.aprice * pro.num | currency:"￥"}}</td>
                       <td><button ng-click="del(pro.id)">删除</button></td>
                   </tr>
                   <tr>
                       <td colspan="2" align="right">总价为:</td>
                       <td ng-bind="allPirce() | currency:'￥'" colspan="4"></td>
                   </tr>
               </tbody>
           </table><br />
           <form ng-show="formShow">
               <h3>添加商品</h3>
               商品名称:<input type="text" placeholder="请输入name" ng-model="add_name"/><br /><br />
               商品价格:<input type="text" placeholder="请输入price" ng-model="add_price"/><br /><br />
               商品数量:<input type="text" placeholder="请输入number" ng-model="add_num"/><br /><br />
               <input type="button" value="添加" ng-click="add()"/>
           </form>
           <p ng-show="!isshow">您的购物车为空!</p>
       </center>
   </body>
</html>

简单的angular购物车

猜你喜欢