English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Ce texte décrit l'implémentation de fonctionnalités de filtrage et de suppression de tableaux complexes dans Angular. Partagé pour que tout le monde puisse le consulter, voici les détails :
Voyons d'abord l'effet de exécution :
Voici le code spécifique :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>fr.oldtoolbag.com Filtre Angular, suppression </title>
<style>
table{
bordure: 1px solide noir;
largeur: 800px;
}
td, th{
bordure: 1px solide noir;
text-aligner: center;
}
th{
fond: #767674;
}
.d1{
largeur: 50%;
marge: 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 R"9s"
user: "赵云",
tel:15777777777,
price:4999,
city: "北京",
time: new Date('03-09 10:00'),
sta: "已发货"
},
{
id:12,
name: "VIVO X"20",
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:"expédié"
},
{
id:1,
name: "小*Mix2"
user: "黄盖",
tel:13111111111,
price:3299,
city: "北京",
time: new Date('03-015 10:00'),
sta:"expédié"
};
$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:"expédié"
});
$scope.arr = $scope.arrs;
$scope.isc = false;
}
});
</script>
</head>
<body ng-app="MyApp" ng-controller="democ">
<div class="d1">
<div>
<input type="text" placeholder="Recherche par nom d'utilisateur" ng-change="seluser()" ng-model="reg_user"/>
<input type="text" placeholder="Recherche par numéro de téléphone" ng-change="seltel()" ng-model="reg_tel"/>
<select>
<option>Choisir la ville</option>
<option>Beijing</option>
<option>Shanghai</option>
<option>Guangzhou</option>
</select>
<select ng-change="selsta()" ng-model="reg_sta">
<option value="">Choisir l'état</option>
<option value="发货">Envoi</option>
<option value="已发货">Déjà expédié</option>
</select>
<select ng-model="selid">
<option value="">--Veuillez choisir--</option>
<option value="id">ID croissant</option>
<option value="-id">ID décroissant</option>
</select>
<select ng-model="selmonth">
<option value="">démarrer le mois</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="">fin du mois</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="ajouter une commande" class="btn" ng-click="isc=true"/>
<input type="button" value="expédier en masse" class="btn"/>
<input type="button" value="supprimer en masse" class="btn"1" ng-click="delAll()"/>
mot sensible:米(商品名)->remplacer par*
</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="Supprimer" ng-click="del(this)"/></td>
</tr>
</table>
</div>
<div ng-show="isc">
I.D. :<input type="text" ng-model="a_id"/><br />
Nom du produit :<input type="text" ng-model="a_name"/><br />
Nom d'utilisateur :<input type="text" ng-model="a_user"/><br />
Numéro de téléphone :<input type="text" ng-model="a_tel"/><br />
Valeur :<input type="text" ng-model="a_price"/><br />
Ville :<input type="text" ng-model="a_city"/><br />
<input type="button" value="Enregistrer" ng-click="add()"/>
</div>
</div>
</body>
</html>
PS :Certaines fonctions du code ne sont pas encore parfaites, les amis intéressés peuvent les tester et les modifier pour les améliorer.
Les lecteurs intéressés par plus de contenu sur AngularJS peuvent consulter les sujets spéciaux de ce site : "Résumé des techniques d'opération des directives AngularJS", "Tutoriel d'initiation et d'approfondissement en AngularJS" et "Résumé de l'architecture MVC en AngularJS"
J'espère que les informations de cet article pourront être utiles à la conception des programmes AngularJS de chacun.
Déclaration : Le contenu de cet article est issu du réseau, propriété de ses auteurs respectifs. Le contenu est apporté par les utilisateurs d'Internet de manière volontaire et téléchargé par eux-mêmes. Ce site ne détient pas de droits de propriété, n'a pas été édité par l'homme et n'assume aucune responsabilité juridique. Si vous trouvez du contenu suspect de violation de droits d'auteur, veuillez envoyer un e-mail à : notice#oldtoolbag.com (veuillez remplacer # par @ lors de l'envoi d'un e-mail pour signaler une violation, et fournir des preuves pertinentes. Une fois confirmée, ce site supprimera immédiatement le contenu suspect de violation de droits d'auteur.