老师写的购物车同下

最新推荐文章于 2021-06-19 12:06:02 发布

ch5211314

最新推荐文章于 2021-06-19 12:06:02 发布

阅读量288

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/ch5211314/article/details/79410659

本文介绍了一个使用AngularJS实现的购物车应用实例，包括商品添加、删除、批量操作及价格计算等功能。通过此实例，读者可以了解AngularJS如何应用于实际项目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html ng-app="App">
   <head>
       <meta charset="UTF-8">
       <title></title>


       <style>

           .css1{
               background-color: red;
           }

           .css2{

               background-color: blue;
           }
       </style>
   </head>
   <body ng-controller="Democtrl">



       <div>
           <input type="text" placeholder="请输入查询的商品" ng-model="search"/>
           数量排序:
           <select ng-model="numsBy">
               <option value="numss">数量正序</option>
               <option value="-numss">数量倒序</option>

           </select>

           <button ng-click="deleteAll()">批量删除</button>

       </div>

       <table border="2">

           <tr>
               <td><input type="checkbox" ng-click="selectAll()"/></td>
               <td>产品编号</td>
               <td>产品名称</td>
               <td>购买数量</td>
               <td>产品单价</td>
               <td>产品总价</td>
               <td>操作</td>

           </tr>


           <tr ng-repeat="x in Product | filter:{name:search} | orderBy:numsBy" class="{{$even ? 'css1':'css2'}}">

               <td><input type="checkbox" ng-model="x.state"/></td>
               <td>{{x.id}}</td>
               <td>{{x.name}}</td>
               <td>
                   <button ng-click="jian($index)">-</button>
                   <input type="number" ng-model="x.numss">
                   <button ng-click="add($index)">+</button>

               </td>
               <td>{{x.price}}</td>
               <td>{{x.price*x.numss}}</td>
               <td>
                   <button ng-click="remove($index)">删除</button>
               </td>

               <td>
                   <button ng-click="xiugai($index)">修改</button>
               </td>

           </tr>

       </table>

       <div>
           <span>总价</span>
           <span>{{totalPrices()}}</span>

           <span>数量</span>
           <span>{{numAll()}}</span>

           <button ng-click="removeAll()">清空</button>

       </div>


               <form style="border: 1px solid yellow; width: 260px;">

                   商品编号:<input type="text" ng-model="ID"/><br />
                   商品名称:<input type="text" ng-model="IDname"/><br />
                   商品数量:<input type="number" ng-model="IDnum"/><br />
                   商品单价:<input type="text" ng-model="IDprice"/><br />

                   <button ng-click="add333()">添加</button>

               </form>


               <form style="border: solid black; width: 300px;" ng-show="updateShow">
                   商品编号:<input type="text" ng-model="updateId"/><br />
                   商品名称:<input type="text" ng-model="updateName"/><br />
                   商品数量:<input type="num" ng-model="updateNum"/><br />
                   商品编号:<input type="text" ng-model="updatePrice"/><br />
                   <button type="button" value="提交" ng-click="updateSub()">提交</button>

               </form>



       <script src="libs/angular.min.js"></script>

       <script>
           var App = angular.module("App",[]);

           App.controller("Democtrl",function($scope){

               //给Product定义数据
               $scope.Product = [{
                id: 1000,
                name: "iPhone8",
                numss: 1,
                price: 8888,
                state:false
            }, {
                id: 1001,
                name: "iPhone9",
                numss: 1,
                price: 9888,
                state:false

            }, {
                id: 1002,
                name: "iPhone 2s",
                numss: 1,
                price: 3888,
                state:false
            }, {
                id: 1003,
                name: "iPhone 7P+",
                numss: 1,
                price: 10088,
                state:false
            }];

            //减减的操作 $index angularjs自带的索引    0
            $scope.jian = function(index){
               //0
               if($scope.Product[index].numss>=1){
                   $scope.Product[index].numss--;
               }else{
                   //做删除
               }

            }


            //数量进行加加
            $scope.add = function(index){
               $scope.Product[index].numss++;
            }


            //删除
            $scope.remove = function(index){
               //0   1 index删除哪一个对像的索引
               //

               if(confirm("确定删除吗?")){
                   $scope.Product.splice(index,1);
               }

            }


            //算总价   每一个对像的购买数量*单价相加
            $scope.totalPrices = function(){

               var totalPrices =0;

               for (var x=0;x<$scope.Product.length;x++) {
                   //0      1 *8888   8888
                   totalPrices+=$scope.Product[x].numss*$scope.Product[x].price;
               }

               return totalPrices;
            }

            //清空
            $scope.removeAll = function(){
               $scope.Product = [];
            }


            //数量的总合

            $scope.numAll = function(){
               var totalNum = 0;

               for (var x =0;x<$scope.Product.length;x++) {
                   totalNum+=$scope.Product[x].numss;
               }

               return totalNum;

            }

            /////////////////////////////////////////////////////////////////////


            //批量删除的

            $scope.deleteAll = function(){
               //默认空的数组
               var arr =[];
               //循环数组
               for (var x =0;x<$scope.Product.length;x++) {
                   //如果状态是true的情况下，代表checkbox已经选中了
                   if($scope.Product[x].state){

                       arr.push($scope.Product[x].name);
                   }

               }

               //如果说数给的长度为0，证明一个都没有选中
               if(arr.length<=0){
                   confirm("请您选中之后再进行删除");
               }else{
                   //说明数给的长度不为0，直接删除   ng-repeat ="x in 数组"
                   for (index in arr) {
                       for (index1 in $scope.Product) {

                           if(arr[index]==$scope.Product[index1].name){
                               $scope.Product.splice(index1,1);
                           }
                       }
                   }

               }

            }


            //进行添加的操作
            $scope.add333 = function(){
               //首先判断一下商品编号不能为空，商品编号要是数字类型

               if($scope.ID=="" || $scope.ID==null){
                   alert("商品编号不能为空")

                   return;
               }

               if(isNaN($scope.ID)){
                   alert("商品编号必须是数字")

                   return;
               }


               $scope.Product.push({
                           id:$scope.ID,
                           name: $scope.IDname,
                           numss: $scope.IDnum,
                           price: $scope.IDprice

                       });


            };



            //修改的操作
            $scope.updateShow = false;
             var updateId="";
            var updateName ="";
            var updateNum ="";
            var updatePrice="";




            $scope.xiugai = function(index){
               if(confirm("确定要修改吗?")){
                   $scope.updateShow = true;


                   $scope.updateId = $scope.Product[index].id;
                   $scope.updateName = $scope.Product[index].name;
                   $scope.updateNum = $scope.Product[index].numss;
                   $scope.updatePrice = $scope.Product[index].price;




               }
            }


            //提交的按钮
            $scope.updateSub = function(){

               /*if(){}*/

               //进行id的判断，如果id相等的情况下，我就进行删除的操作


                for (index in $scope.Product) {
                    if($scope.updateId==$scope.Product[index].id){    //如果相等的情况下，进行数据的修改

                        $scope.Product[index].name=$scope.updateName;

                        $scope.Product[index].numss=$scope.updateNum;

                        $scope.Product[index].price=$scope.updatePrice;


                        $scope.updateShow = false;

                   }
                }


            }




           });

       </script>
   </body>
</html>