Angularjs全选反选批量删除修改排序

最新推荐文章于 2018-09-13 19:13:45 发布

sakurakbaby

最新推荐文章于 2018-09-13 19:13:45 发布

阅读量170

点赞数

本文链接：https://blog.csdn.net/sakurakbaby/article/details/79065840

版权

<!DOCTYPE html>
<html ng-app="App" ng-controller="Baby">
   <head>
       <meta charset="utf-8" />
       <title></title>
       <script src="css/angular.min.js"></script>
       <script>
           var App=angular.module("App",[]);
           App.controller("Baby",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);
                                   }
                               }
                           }
                       }
                   }
                }

                //修改
                $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].id=pro;
                         }
                      }
                   }
                }


           });

       </script>
   </head>
   <body>
       <center>
       <h1>购物车</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" cellspacing="0" width="500px" style="margin-top: 20px;" >
           <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>
                   <button ng-click="de(p.name)">删除</button>
                   <button ng-click="up(p.name)">修改</button>
               </td>
           </tr>


       </table>


       </center>
   </body>
</html>