购物车，，模糊查询+排序+删除

最新推荐文章于 2023-12-06 17:32:55 发布

blgktlp

最新推荐文章于 2023-12-06 17:32:55 发布

阅读量420

点赞数

本文链接：https://blog.csdn.net/blgktlp/article/details/78564971

版权

效果图

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" src="../angular/angular.js" ></script>
       <script>
           var app = angular.module("myApp", []);
           app.controller("myCtrl", function($scope) {
               $scope.products = [{
                   "id": 80,
                   "name": "iPhone",
                   "price": 5400
               }, {
                   "id": 1200,
                   "name": "ipad mini",
                   "price": 2200
               }, {
                   "id": 500,
                   "name": "ipad air",
                   "price": 2340
               }, {
                   "id": 290,
                   "name": "ipad",
                   "price": 1420
               }, {
                   "id": 910,
                   "name": "imac",
                   "price": 15400
               }];

               //点击列明进行排序
               $scope.orderFlag = "";
               $scope.orderLine = "id";
               $scope.orderProduct = function(line){
                   $scope.orderLine = line;
                   if($scope.orderFlag == ""){
                       $scope.orderFlag = "-";
                   }else{
                       $scope.orderFlag = "";
                   }
               }
               //下拉菜单删选商品价格、
               $scope.productPrice = "--请选择--";
               $scope.ifShow = function(price){

                   if($scope.productPrice == "--请选择--"){
                       return true;
                   }else{
                       var arr = $scope.productPrice.split("-");
                       var priceMin = arr[0];
                       var priceMax = arr[1];
                       if(price<priceMin || price>priceMax){
                           //alert("111");
                           return false;
                       }else{
                           return true;
                       }
                   }
               }

               //点击删除按钮，删除当前商品
               $scope.delProduct = function(delName){
                   //alert(delName);
                   for(index in $scope.products){
                       if(delName == $scope.products[index].name){
                           $scope.products.splice(index,1);
                       }else{

                       }
                   }
               }
           });
       </script>
   </head>

   <body ng-app="myApp" ng-controller="myCtrl">
       <center>
           <h3>购物车</h3>
           <input type="text" placeholder="产品名称" ng-model="search" /> 产品价格
           <select ng-model="productPrice">
               <option>--请选择--</option>
               <option>0-2000</option>
               <option>2001-4000</option>
               <option>4001-6000</option>
               <option>6001-8000</option>
               <option>8001-10000</option>
               <option>10001-无穷大</option>
           </select><br /><br />
           <table border="1px solid blue" cellpadding="10" cellspacing="0">
               <tr>
                   <td ng-click="orderProduct('id')">产品编号</td>
                   <td ng-click="orderProduct('name')">产品名称</td>
                   <td ng-click="orderProduct('price')">产品价格</td>
                   <td>操作</td>
               </tr>
               <tr ng-repeat="sz in products | filter:{'name':search} | orderBy:(orderFlag+orderLine)" ng-if="ifShow(sz.price)">
                   <td>{{sz.id}}</td>
                   <td>{{sz.name}}</td>
                   <td>{{sz.price}}</td>
                   <td><button ng-click="delProduct(sz.name)">删除</button></td>
               </tr>
           </table>
       </center>
   </body>

</html>

blgktlp

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
购物车，，模糊查询+排序+删除

效果图 var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.products
复制链接

扫一扫