Angularjs实现简单的购物车

来源：互联网发布：淘宝女鞋风格分类编辑：程序博客网时间：2024/05/29 07:38

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title></title>
       <script src="../Angularjs/angular.js"></script>
       <script>
           var app = angular.module("myApp", []);
           app.controller("myCtrl", function($scope) {
               $scope.shops = [{
                   name: "qq1",
                   price: 12.9,
                   num: 3,
                   state: false
               }, {
                   name: "wx1",
                   price: 22,
                   num: 5,
                   state: false
               }, {
                   name: "qq2",
                   price: 33,
                   num: 6,
                   state: false
               }, {
                   name: "wx2",
                   price: 44,
                   num: 4,
                   state: false
               }];

               //增加
               $scope.add = function(index) {
                   $scope.shops[index].num += 1;
               }
               //减少
               $scope.reduce = function(index) {
                   if($scope.shops[index].num > 1) {
                       $scope.shops[index].num -= 1;
                   } else {
                       if(window.confirm("要删除" + $scope.shops[index].name + "吗？")) {
                           $scope.shops.splice(index, 1);
                       } else {

                       }
                   }
               }

               //获取总价
               $scope.allPrice = function() {
                   var all = 0;
                   for(index in $scope.shops) {
                       all += $scope.shops[index].price * $scope.shops[index].num;
                   }
                   return all;
               }

               //全选
               $scope.selectAll = false;
               $scope.selectAllFun = function() {
                   if($scope.selectAll) {
                       for(index in $scope.shops) {
                           $scope.shops[index].state = true;
                       }
                   } else {
                       for(index in $scope.shops) {
                           $scope.shops[index].state = false;
                       }
                   }
               }

               //反选
               $scope.checkSelectAll = function() {
                   var flag = false;
                   for(index in $scope.shops) {
                       if($scope.shops[index].state) {

                       } else {
                           flag = true;
                       }
                   }
                   //至少有一个没有被选中
                   if(flag) {
                       $scope.selectAll = false;
                   } else {
                       $scope.selectAll = true;
                   }
               }

               //批量删除
               $scope.deleteSelected = function() {
                   var selectedShop = [];
                   for(index in $scope.shops) {
                       if($scope.shops[index].state) {
                           selectedShop.push($scope.shops[index].name);
                       }
                   }

                   if(selectedShop.length > 0) {
                       for(i1 in selectedShop) {
                           for(i2 in $scope.shops) {
                               if(selectedShop[i1] == $scope.shops[i2].name) {
                                   $scope.shops.splice(i2, 1);
                               }
                           }
                       }
                   } else {
                       alert("请先选择")
                   }
               }

               //判断数据源的长度
               $scope.getSize = function() {
                   if($scope.shops.length > 0) {
                       return false;
                   } else {
                       return true;
                   }
               };
                  $scope.remove = function(index) {
                if(confirm("确定要删除数据吗")) {
                    $scope.shops.splice(index, 1)
                };
            }
           });
       </script>
   </head>

   <body ng-app="myApp" ng-controller="myCtrl">
       <center>
           <h3>我的购物车</h3>
           <button ng-click="deleteSelected()">批量删除</button><br /><br />
           <table ng-hide="getSize()" border="1 solid blue" cellpadding="10" cellspacing="0">
               <thead>
                   <tr>
                       <th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()" /></th>
                       <th>name</th>
                       <th>price</th>
                       <th>number</th>
                       <th>totalPrice</th>
                       <th>option</th>
                   </tr>
               </thead>
               <tbody>
                   <tr ng-repeat="shop in shops">
                       <td><input type="checkbox" ng-model="shop.state" ng-click="checkSelectAll()" /></td>
                       <td>{{shop.name}}</td>
                       <td>{{shop.price | currency:"￥"}}</td>
                       <td>
                           <button ng-click="reduce($index)">-</button>
                           <input type="number" ng-model="shop.num" style="width: 30px;" />
                           <button ng-click="add($index)">+</button>
                       </td>
                       <td>{{shop.price * shop.num | currency:"￥"}}</td>
                       <td><button ng-click="remove($index)">删除</button> </td>
                   </tr>
                   <tr>
                       <td colspan="6">总价为：<span ng-bind="allPrice() | currency:'￥'"></span></td>
                   </tr>
               </tbody>
           </table>

           <span ng-show="getSize()">您的购物车为空，请先逛<a href="#">购物车</a></span>
       </center>
   </body>

</html>

阅读全文

0 0