购物车修改删除全选反选批量删除查询排序

最新推荐文章于 2023-03-16 20:46:02 发布

原创最新推荐文章于 2023-03-16 20:46:02 发布 · 876 阅读

CC 4.0 BY-SA版权

本文介绍了一个使用Angular开发的购物车应用程序。该应用实现了产品的增删改查功能，并提供了排序、筛选及批量操作等功能。通过实际代码示例展示了Angular在前端开发中的应用。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" src="js/angular.js" ></script>
       <script>
           var app=angular.module("myApp",[])
           app.controller("myCtrl",function($scope){
               $scope.products=[
               {"id":"80","name":"iphone","price":5400,state:false},
               {"id":"1200","name":"ipad mini","price":2200,state:false},
               {"id":"500","name":"ipad air","price":2340,state:false},
               {"id":"290","name":"ipad","price":1420,state:false},
               {"id":"910","name":"imac","price":15400,state:false}
               ]
               //删除
                $scope.de=function(name){
                   if(window.confirm("确定要删除"+name+"吗？")){
                       for(index in $scope.products){
                           if(name==$scope.products[index].name){
                               $scope.products.splice(index,1);
                           }
                       }
                   }
               }

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


               //反选
               $scope.checkselAll = function() {
                   var flag = false;
                   for(index in $scope.products) {
                       if(!$scope.products[index].state) {
                           //满足条件
                           flag = true;
                       }
                   }

                   if(flag) {
                       $scope.selectAll = false;
                   } else {
                       $scope.selectAll = true;
                   }
               }


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

                   if(selArr.length <= 0) {
                       alert("请先选择");
                   } else {
                       if(window.confirm("确定要删除吗？")) {
                           for(index1 in selArr) {
                               for(index2 in $scope.products) {
                                   if(selArr[index1] == $scope.products[index2].name) {
                                       $scope.products.splice(index2,1);
                                   }
                               }
                           }
                       } else {

                       }
                   }
               }

               //修改
               $scope.up=function(name){
                   var pro=window.prompt("确定要修改吗？");
                   if(pro!=null){
                   //   alert(pro);
                   for (index in $scope.products) {
                       if(name== $scope.products[index].name){
                           $scope.products[index].price=pro;
                       }
                   }
                   }



               }



           })

       </script>
   </head>
   <body ng-app="myApp" ng-controller="myCtrl" style="margin: 0px auto;">
       <h1 style="margin: 0px auto;">购物车</h1>
       产品名称：<input type="text" placeholder="产品名称" ng-model="search"/>    
       排序：<select ng-model="paixu">
           <option value="">排序方式</option>
           <option value="id">id正序</option>
           <option value="-id">id逆序</option>
           <option value="price">价格正序</option>
           <option value="-price">价格逆序</option>
       </select>
        <input type="button" value="批量删除" ng-click="delselect()"/>
       <table border="1px solid black" cellpadding="10px" cellspacing="0" width="500px" height="300px">
           <tr>
               <td><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"></td>
               <td>产品编号</td>
               <td>产品名称</td>
               <td>产品价格</td>
               <td>操作</td>
           </tr>
           <tr ng-repeat="p in products | filter:{name:search} | orderBy:paixu" >
               <td><input type="checkbox" ng-model="p.state" ng-click="checkselAll()"></td>
               <td>{{p.id}}</td>
               <td>{{p.name}}</td>
               <td>{{p.price}}</td>
               <td><input type="button" value="删除" ng-click="de(p.name)"><input type="button" value="修改" ng-click="up(p.name)"></td>
           </tr>
       </table>
   </body>
</html>