Heim >Web-Frontend >js-Tutorial >Einführung in Filter und benutzerdefinierte Filter

Einführung in Filter und benutzerdefinierte Filter

一个新手Original: 2017-10-10 10:17:091928Durchsuche

Die Filter in AngularJS werden zum Filtern, Filtern und Formatieren von Ausdrucksergebnissen verwendet, um eine bessere Leistung zu erzielen.
Filtersyntax: unterstützt Mehrfachfilterung und Parameterübergabe
{{Ausdruck |. Filtername 2: 'Parameter' }}
Methode: | -》 Pipeline

Häufig verwendete Filter:

Währung Währungsstilfilter
Datum Datum
Verarbeitung von Groß-/Kleinbuchstaben
orderBy sortiert das angegebene Array in aufsteigender oder absteigender Reihenfolge
Zahl formatiert Zahlen in Text (Verarbeitung). Daten mit Dezimalstellen)
limitTo begrenzt die Anzahl der anzuzeigenden Arrays oder Strings

<!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>

Einführung in Filter und benutzerdefinierte Filter

self Filtermethode definieren:

app. filter('Filtername', function(){

Rückgabefunktion(Eingabe, arg){
//Eingabe sind die an den Filter
übergebenen Daten //arg ist der Parameter des Filters selbst
Geben Sie „gefilterte Ergebnisse“ zurück
}
})

<!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>

Das obige ist der detaillierte Inhalt vonEinführung in Filter und benutzerdefinierte Filter. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Eine kurze Einführung in AjaxNächster Artikel：Eine kurze Einführung in Ajax

In Verbindung stehende Artikel

Mehr sehen