php过滤表格,使用Angular如何实现表格过滤
这篇文章主要介绍了Angular实现较为复杂的表格过滤，删除功能,结合实例形式分析了AngularJS针对表格的排序、查询匹配、页面元素属性动态修改等相关操作技巧,需要的朋友可以参考下
本文实例讲述了Angular实现较为复杂的表格过滤，删除功能。分享给大家供大家参考，具体如下：
先来看看运行效果：
具体代码如下：
www.jb51.net 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[i].checked = ck;
}
}
$scope.del = function(th){
$scope.arrs.splice(th,1);
}
$scope.delAll = function(){
for(var i=0; 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:
商品名:
用户名:
手机号:
价 值:
城 市:
以上就是我整理的文字，希望对大家有帮助
相关文章:
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！