Angular实现表格过滤，删除功能

这次给大家带来Angular实现表格过滤，删除功能，Angular实现表格过滤，删除功能的注意事项有哪些，下面就是实战案例，一起来看一下。

具体代码如下：

                    table{        border: 1px solid black;        width: 800px;      }      td , th{        border: 1px solid black;        text-align: center;      }      th{        background: #767674;      }      .d1{        width: 50%;        margin: 0 auto;      }      .d2{        margin-top: 10px;      }      .btn{        background: green;        color: white;      }      .btn1{        background: red;        color: white;      }      tr:nth-child(2n){        background-color: gainsboro;      }                      angular.module("MyApp",[])      .controller("democ",function($scope,$filter){        $scope.isc = false;        $scope.arrs = [{                checked:false,                id:7,                name:"OPPO R9s",                user:"赵云",                tel:15777777777,                price:4999,                city:"北京",                time:new Date('03-09 10:00'),                sta:"已发货"               },               {                checked:false,                id:12,                name:"VIVO X20",                user:"关羽",                tel:15333333333,                price:2998,                city:"上海",                time:new Date('08-22 10:00'),                sta:"已发货"               },               {                checked:false,                id:1,                name:"iPhone 8 Plus",                user:"曹操",                tel:15111111111,                price:7588,                city:"北京",                time:new Date('09-04 10:00'),                sta:"已发货"               },               {                checked:false,                id:11,                name:"小*Note5",                user:"黄忠",                tel:13222222222,                price:699,                city:"重庆",                time:new Date('02-28 10:00'),                sta:"发货"               },               {                checked:false,                id:1,                name:"小*Mix2",                user:"黄盖",                tel:13111111111,                price:3299,                city:"北京",                time:new Date('03-015 10:00'),                sta:"发货"               }];               $scope.arr = $scope.arrs;               $scope.seluser = function(){                 $scope.arr = [];                 var val = $scope.reg_user;                 var f = $filter("filter");                 $scope.arr = f($scope.arrs,{"user":val});               }               $scope.seltel = function(){                 $scope.arr = [];                 var val = $scope.reg_tel;                 var f = $filter("filter");                 $scope.arr = f($scope.arrs,{"tel":val});               }               $scope.selsta = function(){                $scope.arr = [];                var val = $scope.reg_sta;                var f = $filter("filter");                $scope.arr = f($scope.arrs,{"sta":val});               }               $scope.ckAll = function(){                var ck = $scope.sta_ck;                for(var i=0; i<$scope.arrs.length; i++){                  $scope.arrs[i].checked = ck;                }               }               $scope.del = function(th){                $scope.arrs.splice(th,1);               }               $scope.delAll = function(){                for(var i=0; i<$scope.arrs.length; i++){                  if($scope.arrs[i].checked==true){                    $scope.arrs.splice(i,1);                    i--;                  }                }               }               $scope.add = function(){                var d=new Date();                $scope.arrs.push({                  checked:false,                  id:$scope.a_id,                  name:$scope.a_name,                  user:$scope.a_user,                  tel:$scope.a_tel,                  price:$scope.a_price,                  city:$scope.a_city,                  time:d,                  sta:"发货"                });                $scope.arr = $scope.arrs;                $scope.isc = false;               }      });          
      
                                  选择城市          北京          上海          广州                          选择状态          发货          已发货                          --请选择--          ID正序          ID倒叙                          开始月份          1          2          3          4          5          6          7          8          9          10          11          12                          结束月份          1          2          3          4          5          6          7          8          9          10          11          12              
      
                                敏感词:米(商品名)->替换成*      
      
        
          
            
            
ID
            
商品名
            
用户名
            
手机号
            
价格
            
城市
            
下单时间
            
状态
            
操作
          
          
            
            
{{a.id}}
            
{{a.name}}
            
{{a.user}}
            
{{a.tel}}
            
{{a.price|currency : '￥'}}
            
{{a.city}}
            
{{a.time|date : 'MM-HH hh:dd:ss'}}
            
              {{a.sta}}              {{a.sta}}            
            
          
        
      
      
           I D:
           商品名:
           用户名:
           手机号:
           价 值:
          城 市:
                
    
  

登录后复制

PS：代码中尚有一些功能并不完善，感兴趣的朋友可以自行测试修改完善一下。

相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！

推荐阅读：

springmvc实现注解拦截器

anime.js做出动画复选框

以上就是Angular实现表格过滤，删除功能的详细内容，更多请关注【创想鸟】其它相关文章！