Heim > Artikel > Web-Frontend > Angular implementiert Tabellenfilter- und Löschfunktionen
Angular implementiert Tabellenfilter- und Löschfunktionen
- php中世界最好的语言Original
- 2018-04-13 17:11:441898Durchsuche
Dieses Mal werde ich Ihnen Angular zur Implementierung von Tabellenfilter- und Löschfunktionen vorstellen. Was sind die Vorsichtsmaßnahmen für Angular, um Tabellenfilter- und Löschfunktionen zu implementieren? ein Blick.
Der spezifische Code lautet wie folgt:
<!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>
PS: Es gibt noch einige Funktionen im Code, die nicht perfekt sind. Interessierte Freunde können sie selbst testen und ändern.
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
springmvc implementiert Annotation Interceptor
anime.js erstellt animierte Kontrollkästchen
Das obige ist der detaillierte Inhalt vonAngular implementiert Tabellenfilter- und Löschfunktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Der einfachste Weg, eine Taschenrechnerfunktion in JS zu implementierenNächster Artikel：Der einfachste Weg, eine Taschenrechnerfunktion in JS zu implementieren
In Verbindung stehende Artikel
Mehr sehen- Eine eingehende Analyse der Bootstrap-Listengruppenkomponente
- Detaillierte Erläuterung des JavaScript-Funktions-Curryings
- Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)
- Angularjs integriert WeChat UI (weui)
- Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse