English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Dieser Artikel beschreibt die Implementierung von komplexen Tabelle Filtern und Entfernen in Angular. Hiermit geteilt für Ihre Referenz, spezifisch wie folgt:
Schauen wir uns zunächst das Ausführungsresultat an:
Konkretes Code folgt:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">-8" />
<title>de.oldtoolbag.com Angular Filter, Entfernen</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:"Versand"
},
{
id:1,
name:"小*Mix2"
user:"黄盖",
tel:13111111111,
price:3299,
city:"北京",
time:new Date('03-015 10:00'),
sta:"Versand"
};
$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:"Versand"
});
$scope.arr = $scope.arrs;
$scope.isc = false;
}
});
</script>
</head>
<body ng-app="MyApp" ng-controller="democ">
<div class="d1">
<div>
<input type="text" placeholder="Benutzername suchen" ng-change="seluser()" ng-model="reg_user"/>
<input type="text" placeholder="Telefonnummer suchen" ng-change="seltel()" ng-model="reg_tel"/>
<select>
<option>Stadt wählen</option>
<option>Beijing</option>
<option>Shanghai</option>
<option>Guangzhou</option>
</select>
<select ng-change="selsta()" ng-model="reg_sta">
<option value="">Status wählen</option>
<option value="发货">Versand</option>
<option value="已发货">Versandt</option>
</select>
<select ng-model="selid">
<option value="">--Bitte wählen Sie--</option>
<option value="id">ID aufsteigend</option>
<option value="-id">ID umgekehrt</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="btn"1" 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="Löschen" ng-click="del(this)"/></td>
</tr>
</table>
</div>
<div ng-show="isc">
I D:<input type="text" ng-model="a_id"/><br />
Produktname:<input type="text" ng-model="a_name"/><br />
Benutzername:<input type="text" ng-model="a_user"/><br />
Handynummer:<input type="text" ng-model="a_tel"/><br />
Wert:<input type="text" ng-model="a_price"/><br />
Stadt:<input type="text" ng-model="a_city"/><br />
<input type="button" value="Speichern" ng-click="add()"/>
</div>
</div>
</body>
</html>
PS:Es gibt einige Funktionen im Code, die noch nicht vollständig sind. Freunde, die daran interessiert sind, können selbst testen und verbessern.
Interessierte Leser, die mehr über AngularJS erfahren möchten, können die Themen dieser Seite überprüfen: 'AngularJS Anweisungstipps zusammengefasst', 'AngularJS Einführung und Fortschrittstutorial' und 'AngularJS MVC-Architektur zusammengefasst'.
Es hofft, dass die in diesem Artikel beschriebenen Informationen für die AngularJS-Programmgestaltung hilfreich sind.
Erklärung: Der Inhalt dieses Artikels stammt aus dem Internet und gehört dem jeweiligen Urheber. Der Inhalt wurde von Internetnutzern freiwillig bereitgestellt und hochgeladen. Diese Seite besitzt keine Eigentumsrechte und hat den Inhalt nicht manuell bearbeitet. Diese Seite übernimmt keine Haftung für rechtliche Konsequenzen. Wenn Sie urheberrechtlich geschützte Inhalte entdecken, freuen wir uns über eine E-Mail an: notice#w3Anmerkung: Bitte ersetzen Sie bei E-Mails das # durch @ und melden Sie den Verdacht auf Urheberrechtsverletzung, und fügen Sie relevante Beweise bei. Bei nachgewiesener Urheberrechtsverletzung wird diese Seite sofort den fraglichen Inhalt löschen.