English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
This article describes the implementation of complex table filtering and deletion functions in Angular. Shared for everyone's reference, 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">-8" />
<title>www.oldtoolbag.com Angular filtering, deletion</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 = [{
id:7,
name:"OPPO R9s",
user:"赵云",
tel:15777777777,
price:4999,
city:"北京",
time:new Date('03-09 10:00'),
sta:"已发货"
},
{
id:12,
name:"VIVO X20",
user:"关羽",
tel:15333333333,
price:2998,
city:"上海",
time:new Date('08-22 10:00'),
sta:"已发货"
},
{
id:1,
name:"iPhone 8 Plus",
user:"曹操",
tel:15111111111,
price:7588,
city:"北京",
time:new Date('09-04 10:00'),
sta:"已发货"
},
{
id:11,
name:"小*Note5"
user:"黄忠",
tel:13222222222,
price:699,
city:"重庆",
time:new Date('02-28 10:00'),
sta:"Dispatched"
},
{
id:1,
name:"小*Mix2"
user:"黄盖",
tel:13111111111,
price:3299,
city:"北京",
time:new Date('03-015 10:00'),
sta:"Dispatched"
};
$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.arrs.splice(th,1);
}
$scope.delAll = function(){
for(var i=0; i<$scope.arrs.length; i++{
$scope.arrs.splice(i,1);
i--;
}
}
}
$scope.add = function(){
var d=new Date();
time:d,
sta:"Dispatched"
});
$scope.arr = $scope.arrs;
$scope.isc = false;
}
});
</script>
</head>
<body ng-app="MyApp" ng-controller="democ">
<div class="d1">
<div>
<input type="text" placeholder="Search by username" ng-change="seluser()" ng-model="reg_user"/>
<input type="text" placeholder="Search by phone number" ng-change="seltel()" ng-model="reg_tel"/>
<select>
<option>Select city</option>
<option>Beijing</option>
<option>Shanghai</option>
<option>Guangzhou</option>
</select>
<select ng-change="selsta()" ng-model="reg_sta">
<option value="">Select status</option>
<option value="发货">Dispatched</option>
<option value="已发货">Shipped</option>
</select>
<select ng-model="selid">
<option value="">--Please select--</option>
<option value="id">ID ascending</option>
<option value="-id">ID reverse</option>
</select>
<select ng-model="selmonth">
<option value="">Start Month</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="">End Month</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="Add New Order" class="btn" ng-click="isc=true"/>
<input type="button" value="Batch Ship" class="btn"/>
<input type="button" value="Batch Delete" class="btn"1" ng-click="delAll()"/>
Sensitive word: 米(Product name)->Replace with*
</div>
<div>
<table cellpadding="0" cellspacing="0">
<tr>
<th><input type="checkbox" ng-change="ckAll()" ng-model="sta_ck"/></th>
<th>ID</th>
<th>Product Name</th>
<th>Username</th>
<th>Phone Number</th>
<th>Price</th>
<th>City</th>
<th>Order Time</th>
<th>Status</th>
<th>Operation</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="Delete" ng-click="del(this)"/></td>
</tr>
</table>
</div>
<div ng-show="isc">
ID:<input type="text" ng-model="a_id"/><br />
Product Name:<input type="text" ng-model="a_name"/><br />
Username:<input type="text" ng-model="a_user"/><br />
Phone Number:<input type="text" ng-model="a_tel"/><br />
Value:<input type="text" ng-model="a_price"/><br />
City:<input type="text" ng-model="a_city"/><br />
<input type="button" value="Save" ng-click="add()"/>
</div>
</div>
</body>
</html>
PS:There are still some functions not perfect in the code. Interested friends can test and modify them to improve them.
Readers who are interested in more about AngularJS can check the special topics on this site: 'Summary of AngularJS Directive Operation Skills', 'AngularJS Tutorial for Beginners and Advanced', and 'Summary of AngularJS MVC Architecture'.
I hope the description in this article will be helpful to everyone's AngularJS program design.
Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been edited by humans, and does not assume any relevant legal responsibility. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email for reporting. Provide relevant evidence, and once verified, this site will immediately delete the infringing content.)