购物车，增加，删除，模糊查询隔行变色+排序

来源：互联网发布：asp程序域名绑定授权编辑：程序博客网时间：2024/04/28 15:52

效果图

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" src="../angular/angular.js" ></script>
       <style>
           table tr:nth-child(odd){
               background-color: #999999;
               table tr:nth-child(even){
               background-color: #E1E1E1;
           }
       </style>

       <script>
           var app=angular.module("myApp",[]);
           app.controller("myCtrl",function($scope){
               //定义数据
               $scope.products=[{
                   name:"云南白药",
                   num:100,
                   add:"云南",
                   price:19.9,
                   dates:"2017-11-20 09:32:21"
               },{
                   name:"999感冒灵",
                   num:30,
                   add:"北京",
                   price:12.5,
                   dates:"2017-11-20 10:32:21"
               },{
                   name:"感康",
                   num:20,
                   add:"河北",
                   price:16.6,
                   dates:"2017-11-20 11:11:11"
               },{
                   name:"人参",
                   num:1,
                   add:"长白山",
                   price:9999,
                   dates:"2017-11-20 09:32:21"
               }];

               //删除模块
               $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.selOrder;
               $scope.orderSel=function(){
                   //进行判断
                   if($scope.selOrder=="num"){
                       $scope.orderFlag="";
                       $scope.orderLine="num";
                   }else if($scope.selOrder=="-num"){
                       $scope.orderFlag="-";
                       $scope.orderLine="num";
                   }else if($scope.selOrder=="price"){45
                       $scope.orderFlag="";
                       $scope.orderLine="price";
                   }else if($scope.selOrder=="-price"){
                       $scope.orderFlag="-";
                       $scope.orderLine="price"
                   }
               }
               //入库
               $scope.isShow=false;
               $scope.isIf=function(){
                   if($scope.isShow){
                       $scope.isShow=false;
                   }else{
                       $scope.isShow=true;
                   }
               }
               //添加商品
               $scope.newName = "";
               $scope.newNum = "";
               $scope.newAddress = "";
               $scope.newPrice = "";
               $scope.addProduct=function(){
                   alert($scope.newName);
                   var newProduct={
                       name:$scope.newName,
                       num:parseInt($scope.newNum),
                       add:$scope.newAddress,
                       price:$scope.newPrice,
                       dates:new Date()
                   };
                   $scope.products.push(newProduct);
               }
           });
       </script>
   </head>
   <body ng-app="myApp" ng-controller="myCtrl">
            
       <center>
           <h2>商品库存管理系统</h2>
           <input ng-model="search" type="text" placeholder="输入关键字搜索..." />
           <select ng-model="selOrder" ng-change="orderSel()"style="margin-left: 200px;">
               <option value="">排序方式</option>
               <option value="num">按照货物数量正序排列</option>
               <option value="-num">按照货物数量倒序排列</option>
               <option value="price">按照入库时间正序排列</option>
               <option value="-price">按照入库时间倒序排列</option>
           </select>
           <button ng-click="isIf()" style="background: #99FF00; margin-left: 40px;">入库</button>
           <br /><br />
           
           <table border="1px solid blue" cellpadding="10" cellspacing="0" id="tbMain">
               <tr>
                   <th>货物名称</th>
                   <th>货物数量</th>
                   <th>货物产地</th>
                   <th>货物单价</th>
                   <th>货物入库日期</th>
                   <th>操作</th>
               </tr>
               <tr ng-repeat="sz in products | filter:{'name':search} | orderBy:(orderFlag+orderLine)">
                   <td>{{sz.name}}</td>
                   <td>{{sz.num}}</td>
                   <td>{{sz.add}}</td>
                   <td>{{sz.price | currency:"￥："}}</td>
                   <td>{{sz.dates | date:"yyyy-MM-dd hh:mm:ss"}}</td>
                   <td>
                       <button ng-click="delProduct(sz.name)">删除</button>
                   </td>
               </tr>
           </table>
           <br /><br />
           <div style="width: 300px;" ng-show="isShow">
               <h3>入库操作</h3>
               商品名称：<input type="text" placeholder="请输入商品名称" ng-model="newName"/><br /><br />
               商品数量：<input type="text" placeholder="请输入商品数量" ng-model="newNum"/><br /><br />
               商品产地：<input type="text" placeholder="请输入商品产地" ng-model="newAddress"/><br /><br />
               商品价格：<input type="text" placeholder="请输入商品价格" ng-model="newPrice"/><br /><br />
               <input type="button" value="添加" ng-click="addProduct()"/>
           </div>
       </center>
   </body>
</html>

阅读全文

0 0