本文实例讲述了Angular实现较为复杂的表格过滤，删除功能。分享给大家供大家参考，具体如下：
先来看看运行效果：
具体代码如下：
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>www.VeVB.COm Angular过滤、删除</title> <style> 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; } </style> <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> </head><body ng-app="MyApp" ng-controller="democ"> <div class="d1"> <div> <input type="text" placeholder="用户名搜索" ng-change="seluser()" ng-model="reg_user"/> <input type="text" placeholder="手机号搜索" ng-change="seltel()" ng-model="reg_tel"/> <select> <option>选择城市</option> <option>北京</option> <option>上海</option> <option>广州</option> </select> <select ng-change="selsta()" ng-model="reg_sta"> <option value="">选择状态</option> <option value="发货">发货</option> <option value="已发货">已发货</option> </select> <select ng-model="selid"> <option value="">--请选择--</option> <option value="id">ID正序</option> <option value="-id">ID倒叙</option> </select> <select ng-model="selmonth"> <option value="">开始月份</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </select> <select ng-model="lastmonth"> <option value="">结束月份</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </select> </div> <div class="d2"> <input type="button" value="新增订单" class="btn" ng-click="isc=true"/> <input type="button" value="批量发货" class="btn"/> <input type="button" value="批量删除" class="btn1" ng-click="delAll()"/> 敏感词:米(商品名)->替换成* </div> <div> <table cellpadding="0" cellspacing="0"> <tr> <th><input type="checkbox" ng-change="ckAll()" ng-model="sta_ck"/></th> <th>ID</th> <th>商品名</th> <th>用户名</th> <th>手机号</th> <th>价格</th> <th>城市</th> <th>下单时间</th> <th>状态</th> <th>操作</th> </tr> <tr ng-repeat="a in arr|orderBy : selid | filter:{time:selmonth} | filter:{time:lastmonth}"> <td><input type="checkbox" ng-model="a.checked"/></td> <td>{{a.id}}</td> <td>{{a.name}}</td> <td>{{a.user}}</td> <td>{{a.tel}}</td> <td>{{a.price|currency : '￥'}}</td> <td>{{a.city}}</td> <td>{{a.time|date : 'MM-HH hh:dd:ss'}}</td> <td> <span ng-show="a.sta=='已发货'">{{a.sta}}</span> <span ng-show="a.sta=='发货'"><a href="#" rel="external nofollow" ng-click="a.sta='已发货'">{{a.sta}}</a></span> </td> <td><input type="button" value="删除" ng-click="del(this)"/></td> </tr> </table> </div> <div ng-show="isc"> I D:<input type="text" ng-model="a_id"/><br /> 商品名:<input type="text" ng-model="a_name"/><br /> 用户名:<input type="text" ng-model="a_user"/><br /> 手机号:<input type="text" ng-model="a_tel"/><br /> 价 值:<input type="text" ng-model="a_price"/><br /> 城 市:<input type="text" ng-model="a_city"/><br /> <input type="button" value="保存" ng-click="add()"/> </div> </div> </body></html>PS：代码中尚有一些功能并不完善，感兴趣的朋友可以自行测试修改完善一下。
更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
新闻热点
疑难解答
