angular面试题|Angular实现较为复杂的表格过滤，删除功能示例

本文实例讲述了Angular实现较为复杂的表格过滤，删除功能。分享给大家供大家参考，具体如下：

先来看看运行效果：

具体代码如下：

  
    
    
    
    <script src="angular.min.js"></script>
    <script type="text/javascript" src="jquery-1.9.1.min.js" ></script>
    <script>
      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;
               }
      });
    </script>
  

    
      
        
        
        
          选择城市
          北京
          上海
          广州
        
        
          选择状态
          发货
          已发货
        
        
          --请选择--
          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：代码中尚有一些功能并不完善，感兴趣的朋友可以自行测试修改完善一下。

angular面试题|Angular实现较为复杂的表格过滤，删除功能示例

http://m.bbyears.com/wangyezhizuo/143976.html

推荐访问: