Maison >interface Web >js tutoriel >Introduction aux filtres et aux filtres personnalisés

Introduction aux filtres et aux filtres personnalisés

一个新手original: 2017-10-10 10:17:091955parcourir

Les filtres d'angularjs sont utilisés pour filtrer, filtrer et formater les résultats des expressions afin d'obtenir de meilleures performances.
Syntaxe du filtre : prend en charge plusieurs filtrages et passages de paramètres
{{expression | Nom du filtre : 'paramètre' | Nom du filtre 2 : 'paramètre' }}
Méthode : -》 Pipeline

Filtres couramment utilisés :
filtre de style de devise
date date
traitement des majuscules/minuscules
orderBy trie le tableau spécifié par ordre croissant ou décroissant
numéro formate les nombres en texte (traitement de données avec des points décimaux)
limitTo limite le nombre de tableaux ou de chaînes à afficher

<!DOCTYPE html><html ng-app="myApp"><head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script src="js/angular.js"></script></head><body><p ng-controller="myCtrl">
  <table>
    <thead>
      <tr>
        <th>名字</th>
        <th>分数</th>
        <th>年龄</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="stu in stuList | orderBy:&#39;score&#39;:true | limitTo:3">
        <td>{{stu.name}}</td>
        <td>{{stu.score}}</td>
        <td>{{stu.age}}</td>
      </tr>
    </tbody>
  </table></p><script>
  var app = angular.module(&#39;myApp&#39;, [&#39;ng&#39;]);

  app.controller(&#39;myCtrl&#39;, function ($scope) {
    $scope.stuList = [
      {name:&#39;Mary0&#39;,age:20,score:80},
      {name:&#39;Mary1&#39;,age:21,score:70},
      {name:&#39;Mary2&#39;,age:22,score:88},
      {name:&#39;Mary3&#39;,age:23,score:90},
      {name:&#39;Mary4&#39;,age:24,score:60}
    ]
  });</script></body></html>

Introduction aux filtres et aux filtres personnalisés

méthode de filtrage self Define :

app .filter('nom du filtre',function(){
Fonction de retour (entrée, arg) {
//L'entrée correspond aux données transmises au filtre
//arg est le paramètre du filtre lui-même
Renvoie les « résultats filtrés »
}
})

<!DOCTYPE html><html ng-app="myApp"><head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script src="js/angular.js"></script></head><body><p ng-controller="myCtrl">
  <!-- 将price所对应的值通过管道传递给自定义的过滤器-->
  <h1>{{price | myFilter:&#39;￥&#39; }}</h1></p><script>
  var app = angular.module(&#39;myApp&#39;, [&#39;ng&#39;]);  //创建过滤器:过滤器的本质是方法，有输入有输出
  app.filter(&#39;myFilter&#39;, function () {
    return function (input,arg) {
      console.log(        &#39;输入为&#39;+input+" 过滤器的参数为:"+arg);     
      var output = arg+input;      
      return output;
    }
  })

  app.controller(&#39;myCtrl&#39;, function ($scope) {
      $scope.price = 100;
  });</script></body></html>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en 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：Une brève introduction à ajaxArticle suivant：Une brève introduction à ajax

Articles Liés

Voir plus