购物车删除筛选排序

最新推荐文章于 2022-03-09 22:03:30 发布

小幸运圈圈

最新推荐文章于 2022-03-09 22:03:30 发布

阅读量280

点赞数

本文链接：https://blog.csdn.net/Zyy_921/article/details/78810511

版权

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

               /*$scope.de=function(index){
                   //删除当前项
                   $scope.shops.splice(index,1);
               }*/

               $scope.de=function(name){
                   if(window.confirm("确定要删除"+name+"吗？")){
                       for(index in $scope.shops){
                           if(name == $scope.shops[index].name){
                               $scope.shops.splice(index,1);
                           }
                       }
                   }
               }

               //下拉菜单筛选价格
               $scope.sel = "--请选择--";
               /*$scope.haha = function(){
                   alert($scope.sel);
               }*/
               $scope.isPrice = function(price){
                   //判断当前商品价值是否在选中的价格范围内
                   var priceArr = $scope.sel.split("--");
                   var priceMin = priceArr[0];
                   var priceMax = priceArr[1];
                   if($scope.sel == "--请选择--"){
                       return true;
                   }else{
                       if(isNaN(priceMax)){
                           if(price>=priceMin){
                               return true;
                           }else{
                               return false;
                           }
                       }else{
                           if(price>=priceMin && price <= priceMax){
                               return true;
                           }else{
                               return false;
                           }
                       }
                   }
               }

               //点击列明进行排序
               $scope.flag = "";
               $scope.orderColumn = "id";
               $scope.order = function(column){
                   //alert(column);
                   $scope.orderColumn = column;
                   if($scope.flag == ""){
                       $scope.flag = "-";
                   }else{
                       $scope.flag = "";
                   }
               }
           })
       </script>
   </head>
   <body ng-app="myApp" ng-controller="myCtrl">
       <center>
           <h3>商品列表</h3>
           <input type="text" placeholder="商品名称" ng-model="search"/>
           产品价格:<select ng-model="sel"">
               <option>--请选择--</option>
               <option> 0--2000</option>
               <option> 2001--3000</option>
               <option> 3001--4000</option>
               <option> 4001--5000</option>
               <option> 5001--6000</option>
               <option> 6001--无限大</option>
           </select><br /><br />

           <table border="1px solid blue;" cellpadding="10" cellspacing="0">
               <thead>
                   <tr>
                       <th ng-click="order('id')">产品编号</th>
                       <th ng-click="order('name')">产品名称</th>
                       <th ng-click="order('price')">产品价格</th>
                       <th>操作</th>
                   </tr>
               </thead>
               <tbody>
                   <tr ng-repeat="shop in shops | filter:{name:search} | orderBy:flag+orderColumn" ng-show="isPrice(shop.price)">
                       <td>{{shop.id}}</td>
                       <td>{{shop.name}}</td>
                       <td>{{shop.price}}</td>
                       <td width="50px"><button ng-click="de(shop.name)">删除</button></td>
                   </tr>
               </tbody>
           </table>
       </center>
   </body>
</html>

小幸运圈圈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
购物车删除筛选排序

var app = angular.module("myApp",[]); app.controller("myCtrl",function($scope){ $scope.shops = [{ id:80, name:"iPhone",
复制链接

扫一扫