Maison > Article > interface Web > Exemple d'analyse du filtre AngularJS
La société utilise désormais ionic, qui encapsule certaines API basées sur angulairejs pour les webapps. Le filtre angulairejs récemment utilisé a en effet permis d'économiser beaucoup de code.
ng est un filtre relativement inutile, mentionnons-le brièvement ici ! Des exemples de filtres couramment utilisés pour la soupe au poulet sont donnés ci-dessous.
minuscule(minuscule)
{{ nom | minuscule }}
majuscule(majuscule)
{{ nom | majuscule }}
nombre (nombre formaté)
Le filtre numérique peut ajouter des divisions en milliers à un nombre, comme celui-ci, 123 456 789. En même temps, il reçoit un paramètre, qui peut spécifier le nombre de décimales que le petit type float conserve :
{{ num | number : 2 }}
currency (traitement des devises)
{{num | monnaie : '¥'}}
json (objet json formaté)
{{ jsonTest | json}}
fonctionne comme le JSON.stringify() familier est identique à
limitTo (limiter la longueur du tableau ou la longueur de la chaîne)
{{ childrenArray | limitTo : 3 }} //Les 3 premiers éléments du tableau sera affiché
filtre (sous-chaîne correspondante)
est utilisé pour traiter un tableau, puis filtrer les éléments contenant une certaine sous-chaîne et les renvoyer sous forme de sous-tableau. Il peut s'agir d'un tableau de chaînes ou d'un tableau d'objets. S'il s'agit d'un tableau d'objets, la valeur de l'attribut peut correspondre. Il reçoit un paramètre pour définir les règles de correspondance des sous-chaînes.
html
<ul> <li>filter 匹配子串(以下写法只是方便观察)</li> <li>{{ webArr | filter : 'n' }} <!--匹配属性值中含有n的--></li> <li>{{ webArr | filter : 25 }} <!--匹配属性值中含有25的--></li> <li>{{ webArr | filter : {name : 'l'} }} <!--//参数是对象,匹配name属性中含有l的--></li> <li>{{ webArr | filter : fun }} <!--/参数是函数,指定返回age>25的--></li> </ul>
js
$scope.webArr = [ {name:'nick',age:25}, {name:'ljy',age:28}, {name:'xzl',age:28}, {name:'zyh',age:30} ]; $scope.fun = function(e){return e.age>25;};
Affichage de l'effet :
filtrer la sous-chaîne correspondante (sous Le l'écriture est juste pour faciliter l'observation)
[{"name":"nick","age":25}] [{"name":"nick","age":25}] [{"name":"ljy","age":28},{"name":"xzl","age":28}] [{"name":"ljy","age":28},{"name":"xzl","age":28},{"name":"zyh","age":30}]
Type de date
Le filtre de date devrait être le plus simple parmi les filtres couramment utilisés !
aaaa--représente l'année
MM--mois (doit être en majuscule)
jj--date
hh--heure ; ;
mm--minutes (doit être en minuscules);
ss--secondes
EEEE--semaine
hh:mm-- le formulaire est au format 24 heures
h:mma--format 12 heures
où année, mois, jour, heure, minute, seconde ou / : - Attendez et essayez de faire correspondre c'est toi-même !
<ul> <li>8 日期1</li> <li ng-bind="date|date:'yyyy/MM/dd hh:mm:ss EEEE'"></li> <li>8 日期2</li> <li ng-bind="date|date:'yyyy年MM月dd日 h:mma EEEE'"></li> <li>8 日期3</li> <li ng-bind="date|date:'yyyy年MM月dd日 hh时mm分ss秒'"></li> <li>8 日期4</li> <li ng-bind="date|date:'yyyy/MM/dd hh:mm:ss'"></li> </ul>
L'effet d'affichage de la date 1 :
19/11/2016 11:59:05 samedi
L'affichage effet de la date 2 Effet d'affichage :
19 novembre 2016 12:01 samedi
Effet d'affichage de la date 3 :
22 novembre 2016 10:42:09
L'effet d'affichage de la date 4 :
22/11/2016 11:16:58
orderBy tri (je pense personnellement que le septième exemple est la meilleure façon de l'écrire)
ng-repeat génère une portée indépendante et ajoute le pipeline orderBy directement après la boucle ng-repeat.
L'utilisation est très simple, mais il y a deux pièges auxquels vous devez faire attention :
N'oubliez pas les guillemets des paramètres
Formulaire des paramètres - écrivez l'âge ; directement, pas besoin d’écrire item2.age.
3 Trier par âge (ordre croissant par défaut)
<ul> <li>3 按年龄排序(默认升序)</li> <li ng-repeat="item2 in items2|orderBy:'age'"> <div> <b>name</b> <u ng-bind="item2.name"></u> </div> <div> <b>age</b> <i ng-bind="item2.age"></i> </div> <div> <b>stature</b> <i ng-bind="item2.stature"></i> </div> </li> </ul>
Affichage de l'effet :
按年龄排序(默认升序) name ljy age 27 stature 165 name nick age 25 stature 170 name xzl age 27 stature 175 name zyh age 29 stature 165
4 Trier par âge (si le paramètre true est ajouté, il sera être dans l'ordre inverse ou décroissant)
<ul> <li ng-repeat="item2 in items2|orderBy:'age':true"> <div> <b>name</b> <u ng-bind="item2.name"></u> </div> <div> <b>age</b> <i ng-bind="item2.age"></i> </div> <div> <b>stature</b> <i ng-bind="item2.stature"></i> </div> </li> </ul>
Affichage de l'effet :
按年龄排序(加参数true则为倒序即降序) name zyh age 29 stature 165 name xzl age 27 stature 175 name ljy age 27 stature 165 name nick age 25 stature 170
Il est par ordre décroissant, ce qui n'obtient pas l'effet , voir exemple 7)
Affichage de l'effet :
<ul> <!--<li ng-repeat="item2 in items2|orderBy:'age':'-stature'">--> <li ng-repeat="item2 in items2|orderBy:'age':'stature':true"> <div> <b>name</b> <u ng-bind="item2.name"></u> </div> <div> <b>age</b> <i ng-bind="item2.age"></i> </div> <div> <b>stature</b> <i ng-bind="item2.stature"></i> </div> </li> </ul>
6 Trier d'abord par âge puis par taille ( écrire plusieurs paramètres sous forme de tableau)
想先按年龄升序在按身高降序(全是降序了,达不到效果,见第7例) name zyh age 29 stature 165 name xzl age 27 stature 175 name ljy age 27 stature 165 name nick age 25 stature 170
Affichage de l'effet :
<ul> <li ng-repeat="item2 in items2|orderBy:['age','stature']"> <div> <b>name</b> <u ng-bind="item2.name"></u> </div> <div> <b>age</b> <i ng-bind="item2.age"></i> </div> <div> <b>stature</b> <i ng-bind="item2.stature"></i> </div> </li> </ul>
7 Trier d'abord par âge par ordre croissant, puis par taille par ordre décroissant (écrire plusieurs paramètres sous forme de tableau )
先按年龄在按身高排序(多个参数写出数组形式) name nick age 25 stature 170 name ljy age 27 stature 165 name xzl age 27 stature 175 name zyh age 29 stature 165Ajoutez un signe négatif avant les paramètres pour obtenir l'ordre inverse
Affichage de l'effet :
<ul> <li ng-repeat="item2 in items2|orderBy:['age','-stature']"> <div> <b>name</b> <u ng-bind="item2.name"></u> </div> <div> <b>age</b> <i ng-bind="item2.age"></i> </div> <div> <b>stature</b> <i ng-bind="item2.stature"></i> </div> </li> </ul>
Personnellement, je pense que de nombreux filtres intégrés de ng sont assez inutile. Personnalisez les filtres pour les besoins individuels.
!!7 先按年龄升序在按身高降序(多个参数写出数组形式) name nick age 25 stature 170 name xzl age 27 stature 175 name ljy age 27 stature 165 name zyh age 29 stature 165Filtre personnaliséUn filtre personnalisé renvoie simplement une fonction, et la fonction renvoie la valeur souhaitée ! Exemple :
Personnaliser un filtre de sommation
angular.module('youAppName',[]) .filter('youFilterName',function(){ return function(){ //你的处理代码 return result;//返回你要的值 } })html
Utilisation :
<ul> <li>!!1 求和</li> <li ng-repeat="item1 in items1"> <div ng-bind="item1.male | sumNick:item1.female:item1.gay"></div> </li> </ul>Pipeline Tous les paramètres avant et après are et js
arguments -- l'ensemble des paramètres acceptés par la fonction, class array
var nickAppModule=angular.module('nickApp',[]); nickAppModule //求和 .filter('sumNick',function(){ return function(){ var arr=Array.prototype.slice.call(arguments),sum=0; for(var i= 0,len=arr.length;i<len;i++){ sum+=arr[i]?arr[i]:0; } return sum; } })Array.prototype.slice.call(arguments; ) Cette phrase convertit un tableau en tableau; sum =arr[i]?arr[i]:0;La somme somme est égale à l'accumulation de chaque élément du tableau de et. Évitez de transmettre des valeurs en arrière-plan et de transmettre des paramètres secondaires à la fonction de fichier personnalisé en tant que paramètres. En cas de tolérance aux pannes, écrivez 0 pour garantir la sécurité. Personnaliser un filtre pour trouver le pourcentage (trouver le pourcentage avec deux décimales)html
Utilisation :
<ul ng-repeat="item1 in items1"> <li>!!2 求百分比</li> <li> <b>male</b> <i ng-bind="item1.male|percentNick:item1.female:item1.gay"></i> </li> <li> <b>female</b> <u ng-bind="item1.female|percentNick:item1.male:item1.gay"></u> </li> <li> <b>gay</b> <s ng-bind="item1.gay|percentNick:item1.female:item1.male"></s> </li> </ul>Numérateur Écrit devant du tuyau, la somme de tous les paramètres après le tuyau et des paramètres avant le tuyau est le dénominateur js
Voici une phrase supplémentaire sur le filtre pour sommation ci-dessus :
var nickAppModule=angular.module('nickApp',[]); nickAppModule //百分比 .filter('percentNick',function(){ return function(){ var arr=Array.prototype.slice.call(arguments),sum=0; for(var i= 0,len=arr.length;i<len;i++){ sum+=arr[i]?arr[i]:0; } //0/0也是nan return sum==0?'0%':Math.round((arr[0]?arr[0]:0)/sum*10000)/100+"%"; } })sum==0?'0%':Math.round((arr[0]?arr[0]:0)/sum*10000)/100 "%"Math Fonction intégrée, Math.round arrondit pour conserver les entiers ; Multipliez la somme par 10 000 et divisez-la par 100 pour épisser le signe de pourcentage, c'est-à-dire conserver deux décimales. Code complet :
Ce qui précède est l'intégralité du contenu de cet article. J'espère que le contenu de cet article pourra apporter une certaine aide aux études ou au travail de chacun. supporte le site Web chinois PHP !
ng filter nick