Home > Article > Web Front-end > How to implement table filtering using Angular
How to implement table filtering using Angular
- 亚连Original
- 2018-06-15 23:19:111667browse
This article mainly introduces Angular's implementation of more complex table filtering and deletion functions. It analyzes AngularJS's related operation skills such as table sorting, query matching, and dynamic modification of page element attributes in the form of examples. Friends in need can refer to the following
The example in this article describes Angular's implementation of more complex table filtering and deletion functions. Share it with everyone for your reference, the details are as follows:
Let’s take a look at the running effect first:
The specific code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>www.jb51.net 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">
<p class="d1">
<p>
<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>
</p>
<p 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()"/>
敏感词:米(商品名)->替换成*
</p>
<p>
<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>
</p>
<p 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()"/>
</p>
</p>
</body>
</html>and above This is the text I compiled, I hope it will be helpful to everyone
Related articles:
How to use navigation guard usage in VueRouter
How to implement a collapsible tree menu in Vue.js
The above is the detailed content of How to implement table filtering using Angular. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to implement a calculator using JavaScriptNext article：How to implement a calculator using JavaScript
Related articles
See more- An in-depth analysis of the Bootstrap list group component
- Detailed explanation of JavaScript function currying
- Complete example of JS password generation and strength detection (with demo source code download)
- Angularjs integrates WeChat UI (weui)
- How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills