Maison > Article > interface Web > Exemple d'analyse du filtre AngularJS

Exemple d'analyse du filtre AngularJS

高洛峰original: 2017-02-07 13:59:07863parcourir

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)

majuscule(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 :

currency (traitement des devises)

json (objet json formaté)

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 : &#39;n&#39; }} <!--匹配属性值中含有n的--></li>
 <li>{{ webArr | filter : 25 }} <!--匹配属性值中含有25的--></li>
 <li>{{ webArr | filter : {name : &#39;l&#39;} }} <!--//参数是对象，匹配name属性中含有l的--></li>
 <li>{{ webArr | filter : fun }} <!--/参数是函数，指定返回age>25的--></li>
</ul>

$scope.webArr = [
   {name:&#39;nick&#39;,age:25},
   {name:&#39;ljy&#39;,age:28},
   {name:&#39;xzl&#39;,age:28},
   {name:&#39;zyh&#39;,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:&#39;yyyy/MM/dd hh:mm:ss EEEE&#39;"></li>
 <li>8 日期2</li>
 <li ng-bind="date|date:&#39;yyyy年MM月dd日 h:mma EEEE&#39;"></li>
 <li>8 日期3</li>
 <li ng-bind="date|date:&#39;yyyy年MM月dd日 hh时mm分ss秒&#39;"></li>
 <li>8 日期4</li>
 <li ng-bind="date|date:&#39;yyyy/MM/dd hh:mm:ss&#39;"></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:&#39;age&#39;">
  <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:&#39;age&#39;: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)

J'ai écrit naïvement ceci une fois ^*^

Affichage de l'effet :

<ul>
 <!--<li ng-repeat="item2 in items2|orderBy:&#39;age&#39;:&#39;-stature&#39;">-->
 <li ng-repeat="item2 in items2|orderBy:&#39;age&#39;:&#39;stature&#39;: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:[&#39;age&#39;,&#39;stature&#39;]">
  <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 165

Ajoutez 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:[&#39;age&#39;,&#39;-stature&#39;]">
  <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 165

Filtre personnalisé

Un filtre personnalisé renvoie simplement une fonction, et la fonction renvoie la valeur souhaitée !

Exemple :

Personnaliser un filtre de sommation

angular.module(&#39;youAppName&#39;,[])
  .filter(&#39;youFilterName&#39;,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

arguments -- l'ensemble des paramètres acceptés par la fonction, class array

var nickAppModule=angular.module(&#39;nickApp&#39;,[]);
 nickAppModule
  //求和
  .filter(&#39;sumNick&#39;,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

Voici une phrase supplémentaire sur le filtre pour sommation ci-dessus :

var nickAppModule=angular.module(&#39;nickApp&#39;,[]);
 nickAppModule
//百分比
  .filter(&#39;percentNick&#39;,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?&#39;0%&#39;: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


 
 !!1 求和
 
  
 
 
 <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>
 <ul>
 <li>3 按年龄排序(默认升序)</li>
 <li ng-repeat="item2 in items2|orderBy:&#39;age&#39;">
  <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>
 
 4 按年龄排序(加参数true则为倒序即降序)
 
  
  name
  
  
  
  age
  
  
  
  stature
  
  
 
 
 
 5 想先按年龄升序在按身高降序(全是降序了，达不到效果，见第7例)
 
 
  
  name
  
  
  
  age
  
  
  
  stature
  
  
 
 
 
 6 先按年龄在按身高排序(多个参数写出数组形式)
 
  
  name
  
  
  
  age
  
  
  
  stature
  
  
 
 
 
 !!7 先按年龄升序在按身高降序(多个参数写出数组形式)
 
  
  name
  
  
  
  age
  
  
  
  stature
  
  
 
 
 
 8 日期1
 
 2016/11/19 11:59:05 Saturday
 8 日期2
 
 2016年11月19日 12:01PM Saturday
 8 日期3
 
 2016年11月22日 10时42分09秒
 8 日期4
 
 2016/11/22 11:16:58
 
 {{100000|currency:'￥'}}
 
 filter 匹配子串(以下写法只是方便观察)
 {{ webArr | filter : 'n' }} 
 {{ webArr | filter : 25 }} 
 {{ webArr | filter : {name : 'l'} }} 
 {{ webArr | filter : fun }} 
 
 
 <script>
 var nickAppModule=angular.module(&#39;nickApp&#39;,[]);
 nickAppModule
  //求和
  .filter(&#39;sumNick&#39;,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;
   }
  })
  //百分比
  .filter(&#39;percentNick&#39;,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?&#39;0%&#39;:Math.round((arr[0]?arr[0]:0)/sum*10000)/100+"%";
   }
  })
 </script>
<script>
 nickAppModule
  .controller(&#39;nickCtrl&#39;,[&#39;$scope&#39;,function($scope){
  $scope.items1=[{
   male:66,
   female:23,
   gay:5,
   other:&#39;xxx&#39;,
   msg:&#39;xxx&#39;
  },
   {
   male:16,
   female:8,
   gay:7,
   other:&#39;xxx&#39;,
   msg:&#39;xxx&#39;
   }];
  $scope.items2=[
   {
   name:&#39;ljy&#39;,
   age:27,
   stature:165
   },
   {
   name:&#39;nick&#39;,
   age:25,
   stature:170
   },
   {
   name:&#39;xzl&#39;,
   age:27,
   stature:175
   },
   {
   name:&#39;zyh&#39;,
   age:29,
   stature:165
   }];
  $scope.date=new Date();
  $scope.webArr = [
   {name:&#39;nick&#39;,age:25},
   {name:&#39;ljy&#39;,age:28},
   {name:&#39;xzl&#39;,age:28},
   {name:&#39;zyh&#39;,age:30}
  ];
  $scope.fun = function(e){return e.age>25;};
  }])
</script>

Pour plus d'exemples d'analyse d'articles liés aux filtres AngularJS, veuillez faire attention au site Web PHP chinois !

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de l'utilisation du filtre $filter dans AngularJS (filtre personnalisé)Article suivant：Explication détaillée de l'utilisation du filtre $filter dans AngularJS (filtre personnalisé)

Articles Liés

Voir plus