增加+删除+批量删除+修改+查询+排序+全选

来源：互联网发布：houdini编程编辑：程序博客网时间：2024/05/16 12:44

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" src="../angular/angular.js" ></script>
       <style>
           table tr:nth-child(even){
               background-color: gainsboro;
           }
           table tr:nth-child(odd){
               background-color: darkgrey;
           }
       </style>
       <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.delProduct=function(delName){
                   for(index in $scope.products){
                       if(delName==$scope.products[index].name){
                           $scope.products.splice(index,1);
                           //alert弹出框
                           alert("确定删除么？")
                           alert("删除成功！！！")
                       }else{

                       }
                   }
               }
               $scope.search = "";
               //下拉菜单过滤商品价格范围
               $scope.productPrice = "--请选择--";
               $scope.isShow = function(price) {
                   if($scope.productPrice == "--请选择--") {
                       return true;
                   } else {
                       var priceArr = $scope.productPrice.split("-");
                       var min = priceArr[0];
                       var max = priceArr[1];
                       if(price < min || price > max) {
                           return false;
                       } else {
                           return true;
                       }
                   }
               }
               //全选反选
               $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.checkSelectAll = function() {
                   var a = 0;
                   for(index in $scope.products) {
                       if(!$scope.products[index].state) {
                           $scope.selectAll = false;
                       } else {
                           a++;
                       }
                       if(a == $scope.products.length) {
                           $scope.selectAll = true;
                       } else {
                           $scope.selectAll = false;
                       }
                   }
               }
               //批量删除
               $scope.delSelect=function(){
                   var arr=[];
                   for(index in $scope.products){
                       if($scope.products[index].state){
                           arr.push($scope.products[index].name);
                       }
                   }
                   if(arr.length<=0){
                       alert("请先选择")
                   }else{
                       if(window.confirm("确定删除么？")){
                           for(index in arr){
                               for(index2 in $scope.products){
                                   if(arr[index]==$scope.products[index2].name){
                                       $scope.products.splice(index2,1)
                                   }
                               }
                           }
                       }
                   }
               }
               //新增商品
               $scope.formShow = false;
               $scope.formShowFun = function() {
                   if($scope.formShow) {
                       $scope.formShow = false;
                   } else {
                       $scope.formShow = true;
                       $scope.updateShow = false;
                   }
               }

               //提交新加商品进行验证
               $scope.newId = "";
               $scope.newName = "";
               $scope.newPrice = "";
               //$scope.checkSub = [];
               $scope.divShow = false;
               $scope.sub = function() {
                   $scope.checkSub = [];
                   if($scope.newId == "" || $scope.newId == null) {
                       $scope.checkSub.push("产品编号为空");
                   } else if(isNaN($scope.newId)) {
                       $scope.checkSub.push("产品编号不是整数");
                   }
                   if($scope.newName == "" || $scope.newName == null) {
                       $scope.checkSub.push("产品名称为空");
                   }
                   if($scope.newPrice == "" || $scope.newPrice == null) {
                       $scope.checkSub.push("产品价格为空");
                   } else if(isNaN($scope.newPrice)) {
                       $scope.checkSub.push("产品价格不是整数");
                   }

                   if($scope.checkSub.length > 0) {
                       $scope.divShow = true;
                   } else {
                       $scope.divShow = false;
                       var newPro = {
                           "id": parseInt($scope.newId),
                           "name": $scope.newName,
                           "price": parseInt($scope.newPrice),
                           state: false
                       };
                       $scope.products.push(newPro);
                   }
               }

               //修改页面
               $scope.updateShow = false;
               $scope.updateId = "";
               $scope.updateName = "";
               $scope.updatePrice = "";
               $scope.updateShowFun = function(pro) {
                   $scope.updateShow = true;
                   $scope.formShow = false;
                   $scope.updateId = pro.id;
                   $scope.updateName = pro.name;
                   $scope.updatePrice = pro.price;
               }
               $scope.updateSub = function() {
                   $scope.updateArr = [];
                   if($scope.updateName == "" || $scope.updateName == null) {
                       $scope.updateArr.push("产品名称为空");
                   }
                   if($scope.updatePrice == "" || $scope.updatePrice == null) {
                       $scope.updateArr.push("产品价格为空");
                   } else if(isNaN($scope.updatePrice)) {
                       $scope.updateArr.push("产品价格不是整数");
                   }

                   //验证不满足
                   if($scope.updateArr.length > 0) {
                       $scope.haha = true;
                   } else {
                       $scope.haha = false;
                       for(index in $scope.products) {
                           if(parseInt($scope.updateId) == $scope.products[index].id) {
                               $scope.products[index].name = $scope.updateName;
                               $scope.products[index].price = $scope.updatePrice;
                               $scope.updateShow = false;
                           }
                       }
                   }
               }
           });
       </script>
   </head>
   <body ng-app="myApp" ng-controller="myCtrl">
       <center>
           <h3>购物车</h3>
       <input type="text" size="10" placeholder="产品名称" ng-model="search"/>
       产品价格<select ng-model="productPrice">
           <option>--请选择--</option>
           <option>0-2000</option>
               <option>2001-3000</option>
               <option>3001-4000</option>
               <option>4001-5000</option>
               <option>5001-6000</option>
               <option>6001-7000</option>
               <option>7001-8000</option>
               <option>8001-无穷大</option>
       </select>
       <select ng-model="selOrder">
           <option value="">排序方式</option>
               <option value="id">id正序</option>
               <option value="-id">id逆序</option>
               <option value="price">价格正序</option>
               <option value="-price">价格逆序</option>
       </select>
       <button ng-click="delSelect()">批量删除</button>
       <button ng-model="selectAll" ng-click="selectAllFun()">全选/全不选</button><br /><br />
       <table border="1px solid blue" cellpadding="10" cellspacing="0">
           <thead>
               <tr>
                   <th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"/></th>
                   <th>产品编号</th>
                   <th>产品名称</th>
                   <th>产品价格</th>
                   <th>操作</th>
               </tr>
           </thead>
           <tbody>
               <tr ng-repeat="pro in products | filter:{'name':search} | orderBy:selOrder" ng-show="isShow(pro.price)">
                   <td><input type="checkbox" ng-model="pro.state" ng-click="checkSelectAll()"/></td>
                   <td>{{pro.id}}</td>
                   <td>{{pro.name}}</td>
                   <td>{{pro.price | currency:"￥:"}}</td>
                   <td><button ng-click="delProduct(pro.name)">删除</button>
                       <button ng-click="updateShowFun(pro)">修改</button>
                   </td>
               </tr>
           </tbody>
       </table><br />
       <button ng-click="formShowFun()">添加新产品</button><br /><br />
       <form style="border: 1px solid blue; width: 300px;" ng-show="formShow">
               <h3>添加商品</h3> 商品编号：
               <input type="text" placeholder="商品编号" ng-model="newId" /><br /><br /> 商品名称：
               <input type="text" placeholder="商品名称" ng-model="newName" /><br /><br /> 商品价格：
               <input type="text" placeholder="商品价格" ng-model="newPrice" /><br /><br />
               <div style="border: 1px solid blue; width: 250px; background-color: pink;" ng-show="divShow">
                   <ul>
                       <li ng-repeat="chenk in checkSub">{{chenk}}</li>
                   </ul>
               </div><br />
               <input type="button" value="提交" ng-click="sub()" />
           </form>

           
           <form style="border: 1px solid blue; width: 300px;" ng-show="updateShow">
               <h3>修改商品</h3> 商品编号：
               <input type="text" placeholder="商品编号" ng-model="updateId" disabled="disabled" /><br /><br /> 商品名称：
               <input type="text" placeholder="商品名称" ng-model="updateName" /><br /><br /> 商品价格：
               <input type="text" placeholder="商品价格" ng-model="updatePrice" /><br /><br />
               <div style="border: 1px solid blue; width: 250px; background-color: pink;" ng-show="haha">
                   <ul>
                       <li ng-repeat="chenk in updateArr">{{chenk}}</li>
                   </ul>
               </div><br />
               <input type="button" value="提交" ng-click="updateSub()" />
           </form>
       </center>
   </body>
</html>

阅读全文

0 0