实例详解Angular实现较为复杂的表格过滤和删除功能-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

实例详解Angular实现较为复杂的表格过滤和删除功能

Dec 23, 2017 pm 03:59 PM

angular capai

本文主要介绍了Angular实现较为复杂的表格过滤，删除功能,结合实例形式分析了AngularJS针对表格的排序、查询匹配、页面元素属性动态修改等相关操作技巧,需要的朋友可以参考下没希望能帮助到大家。

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

先来看看运行效果：

具体代码如下：

&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot; /&gt;
    &lt;title&gt;www.jb51.net Angular过滤、删除&lt;/title&gt;
    &lt;style&gt;
      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;
      }
    &lt;/style&gt;
    &lt;script src=&quot;angular.min.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;jquery-1.9.1.min.js&quot; &gt;&lt;/script&gt;
    &lt;script&gt;
      angular.module(&quot;MyApp&quot;,[])
      .controller(&quot;democ&quot;,function($scope,$filter){
        $scope.isc = false;
        $scope.arrs = [{
                checked:false,
                id:7,
                name:&quot;OPPO R9s&quot;,
                user:&quot;赵云&quot;,
                tel:15777777777,
                price:4999,
                city:&quot;北京&quot;,
                time:new Date(&#39;03-09 10:00&#39;),
                sta:&quot;已发货&quot;
               },
               {
                checked:false,
                id:12,
                name:&quot;VIVO X20&quot;,
                user:&quot;关羽&quot;,
                tel:15333333333,
                price:2998,
                city:&quot;上海&quot;,
                time:new Date(&#39;08-22 10:00&#39;),
                sta:&quot;已发货&quot;
               },
               {
                checked:false,
                id:1,
                name:&quot;iPhone 8 Plus&quot;,
                user:&quot;曹操&quot;,
                tel:15111111111,
                price:7588,
                city:&quot;北京&quot;,
                time:new Date(&#39;09-04 10:00&#39;),
                sta:&quot;已发货&quot;
               },
               {
                checked:false,
                id:11,
                name:&quot;小*Note5&quot;,
                user:&quot;黄忠&quot;,
                tel:13222222222,
                price:699,
                city:&quot;重庆&quot;,
                time:new Date(&#39;02-28 10:00&#39;),
                sta:&quot;发货&quot;
               },
               {
                checked:false,
                id:1,
                name:&quot;小*Mix2&quot;,
                user:&quot;黄盖&quot;,
                tel:13111111111,
                price:3299,
                city:&quot;北京&quot;,
                time:new Date(&#39;03-015 10:00&#39;),
                sta:&quot;发货&quot;
               }];
               $scope.arr = $scope.arrs;
               $scope.seluser = function(){
                 $scope.arr = [];
                 var val = $scope.reg_user;
                 var f = $filter(&quot;filter&quot;);
                 $scope.arr = f($scope.arrs,{&quot;user&quot;:val});
               }
               $scope.seltel = function(){
                 $scope.arr = [];
                 var val = $scope.reg_tel;
                 var f = $filter(&quot;filter&quot;);
                 $scope.arr = f($scope.arrs,{&quot;tel&quot;:val});
               }
               $scope.selsta = function(){
                $scope.arr = [];
                var val = $scope.reg_sta;
                var f = $filter(&quot;filter&quot;);
                $scope.arr = f($scope.arrs,{&quot;sta&quot;:val});
               }
               $scope.ckAll = function(){
                var ck = $scope.sta_ck;
                for(var i=0; i&lt;$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&lt;$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:&quot;发货&quot;
                });
                $scope.arr = $scope.arrs;
                $scope.isc = false;
               }
      });
    &lt;/script&gt;
  &lt;/head&gt;
&lt;body ng-app=&quot;MyApp&quot; ng-controller=&quot;democ&quot;&gt;
    &lt;p class=&quot;d1&quot;&gt;
      &lt;p&gt;
        &lt;input type=&quot;text&quot; placeholder=&quot;用户名搜索&quot; ng-change=&quot;seluser()&quot; ng-model=&quot;reg_user&quot;/&gt;
        &lt;input type=&quot;text&quot; placeholder=&quot;手机号搜索&quot; ng-change=&quot;seltel()&quot; ng-model=&quot;reg_tel&quot;/&gt;
        &lt;select&gt;
          &lt;option&gt;选择城市&lt;/option&gt;
          &lt;option&gt;北京&lt;/option&gt;
          &lt;option&gt;上海&lt;/option&gt;
          &lt;option&gt;广州&lt;/option&gt;
        &lt;/select&gt;
        &lt;select ng-change=&quot;selsta()&quot; ng-model=&quot;reg_sta&quot;&gt;
          &lt;option value=&quot;&quot;&gt;选择状态&lt;/option&gt;
          &lt;option value=&quot;发货&quot;&gt;发货&lt;/option&gt;
          &lt;option value=&quot;已发货&quot;&gt;已发货&lt;/option&gt;
        &lt;/select&gt;
        &lt;select ng-model=&quot;selid&quot;&gt;
          &lt;option value=&quot;&quot;&gt;--请选择--&lt;/option&gt;
          &lt;option value=&quot;id&quot;&gt;ID正序&lt;/option&gt;
          &lt;option value=&quot;-id&quot;&gt;ID倒叙&lt;/option&gt;
        &lt;/select&gt;
        &lt;select ng-model=&quot;selmonth&quot;&gt;
          &lt;option value=&quot;&quot;&gt;开始月份&lt;/option&gt;
          &lt;option value=&quot;1&quot;&gt;1&lt;/option&gt;
          &lt;option value=&quot;2&quot;&gt;2&lt;/option&gt;
          &lt;option value=&quot;3&quot;&gt;3&lt;/option&gt;
          &lt;option value=&quot;4&quot;&gt;4&lt;/option&gt;
          &lt;option value=&quot;5&quot;&gt;5&lt;/option&gt;
          &lt;option value=&quot;6&quot;&gt;6&lt;/option&gt;
          &lt;option value=&quot;7&quot;&gt;7&lt;/option&gt;
          &lt;option value=&quot;8&quot;&gt;8&lt;/option&gt;
          &lt;option value=&quot;9&quot;&gt;9&lt;/option&gt;
          &lt;option value=&quot;10&quot;&gt;10&lt;/option&gt;
          &lt;option value=&quot;11&quot;&gt;11&lt;/option&gt;
          &lt;option value=&quot;12&quot;&gt;12&lt;/option&gt;
        &lt;/select&gt;
        &lt;select ng-model=&quot;lastmonth&quot;&gt;
          &lt;option value=&quot;&quot;&gt;结束月份&lt;/option&gt;
          &lt;option value=&quot;1&quot;&gt;1&lt;/option&gt;
          &lt;option value=&quot;2&quot;&gt;2&lt;/option&gt;
          &lt;option value=&quot;3&quot;&gt;3&lt;/option&gt;
          &lt;option value=&quot;4&quot;&gt;4&lt;/option&gt;
          &lt;option value=&quot;5&quot;&gt;5&lt;/option&gt;
          &lt;option value=&quot;6&quot;&gt;6&lt;/option&gt;
          &lt;option value=&quot;7&quot;&gt;7&lt;/option&gt;
          &lt;option value=&quot;8&quot;&gt;8&lt;/option&gt;
          &lt;option value=&quot;9&quot;&gt;9&lt;/option&gt;
          &lt;option value=&quot;10&quot;&gt;10&lt;/option&gt;
          &lt;option value=&quot;11&quot;&gt;11&lt;/option&gt;
          &lt;option value=&quot;12&quot;&gt;12&lt;/option&gt;
        &lt;/select&gt;
      &lt;/p&gt;
      &lt;p class=&quot;d2&quot;&gt;
        &lt;input type=&quot;button&quot; value=&quot;新增订单&quot; class=&quot;btn&quot; ng-click=&quot;isc=true&quot;/&gt;
        &lt;input type=&quot;button&quot; value=&quot;批量发货&quot; class=&quot;btn&quot;/&gt;
        &lt;input type=&quot;button&quot; value=&quot;批量删除&quot; class=&quot;btn1&quot; ng-click=&quot;delAll()&quot;/&gt;
        敏感词:米(商品名)-&gt;替换成*
      &lt;/p&gt;
      &lt;p&gt;
        &lt;table cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;&gt;
          &lt;tr&gt;
            &lt;th&gt;&lt;input type=&quot;checkbox&quot; ng-change=&quot;ckAll()&quot; ng-model=&quot;sta_ck&quot;/&gt;&lt;/th&gt;
            &lt;th&gt;ID&lt;/th&gt;
            &lt;th&gt;商品名&lt;/th&gt;
            &lt;th&gt;用户名&lt;/th&gt;
            &lt;th&gt;手机号&lt;/th&gt;
            &lt;th&gt;价格&lt;/th&gt;
            &lt;th&gt;城市&lt;/th&gt;
            &lt;th&gt;下单时间&lt;/th&gt;
            &lt;th&gt;状态&lt;/th&gt;
            &lt;th&gt;操作&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr ng-repeat=&quot;a in arr|orderBy : selid | filter:{time:selmonth} | filter:{time:lastmonth}&quot;&gt;
            &lt;td&gt;&lt;input type=&quot;checkbox&quot; ng-model=&quot;a.checked&quot;/&gt;&lt;/td&gt;
            &lt;td&gt;{{a.id}}&lt;/td&gt;
            &lt;td&gt;{{a.name}}&lt;/td&gt;
            &lt;td&gt;{{a.user}}&lt;/td&gt;
            &lt;td&gt;{{a.tel}}&lt;/td&gt;
            &lt;td&gt;{{a.price|currency : &#39;￥&#39;}}&lt;/td&gt;
            &lt;td&gt;{{a.city}}&lt;/td&gt;
            &lt;td&gt;{{a.time|date : &#39;MM-HH hh:dd:ss&#39;}}&lt;/td&gt;
            &lt;td&gt;
              &lt;span ng-show=&quot;a.sta==&#39;已发货&#39;&quot;&gt;{{a.sta}}&lt;/span&gt;
              &lt;span ng-show=&quot;a.sta==&#39;发货&#39;&quot;&gt;&lt;a href=&quot;#&quot; rel=&quot;external nofollow&quot; ng-click=&quot;a.sta=&#39;已发货&#39;&quot;&gt;{{a.sta}}&lt;/a&gt;&lt;/span&gt;
            &lt;/td&gt;
            &lt;td&gt;&lt;input type=&quot;button&quot; value=&quot;删除&quot; ng-click=&quot;del(this)&quot;/&gt;&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
      &lt;/p&gt;
      &lt;p ng-show=&quot;isc&quot;&gt;
          　I　D:&lt;input type=&quot;text&quot; ng-model=&quot;a_id&quot;/&gt;&lt;br /&gt;
           商品名:&lt;input type=&quot;text&quot; ng-model=&quot;a_name&quot;/&gt;&lt;br /&gt;
           用户名:&lt;input type=&quot;text&quot; ng-model=&quot;a_user&quot;/&gt;&lt;br /&gt;
           手机号:&lt;input type=&quot;text&quot; ng-model=&quot;a_tel&quot;/&gt;&lt;br /&gt;
           价　值:&lt;input type=&quot;text&quot; ng-model=&quot;a_price&quot;/&gt;&lt;br /&gt;
          城　市:&lt;input type=&quot;text&quot; ng-model=&quot;a_city&quot;/&gt;&lt;br /&gt;
          &lt;input type=&quot;button&quot; value=&quot;保存&quot; ng-click=&quot;add()&quot;/&gt;
      &lt;/p&gt;
    &lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;

Salin selepas log masuk

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