Introduction aux filtres et aux filtres personnalisés-js tutoriel-php.cn

Introduction aux filtres et aux filtres personnalisés

一个新手

Libérer： 2017-10-10 10:17:09

original

1954 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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!