Home >Web Front-end >JS Tutorial >Introduction to filters and custom filters

Introduction to filters and custom filters

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

The filters in angularjs are used to filter, filter, and format expression results to achieve better performance.
Filter syntax: supports multiple filtering and parameter passing
{{expression | Filter name: 'parameter' | Filter name 2: 'parameter' }}
Method: | -》 Pipeline

Commonly used filters:
currency currency style filter
date date
uppercase/lowercase case processing
orderBy sorts the specified array in ascending or descending order
number Format numbers as text (processing of data with decimal points)
limitTo Limit the number of arrays or strings to be displayed

<!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 to filters and custom filters

Custom filtering Filter method:

app.filter('filter name',function(){
return function(input, arg){
//Input is the data passed to the filter
//arg is the parameter of the filter itself
Return ‘filtered results’
}
})

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

The above is the detailed content of Introduction to filters and custom filters. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：A brief introduction to ajaxNext article：A brief introduction to ajax

See more

Introduction to filters and custom filters

Custom filtering Filter method:

Related articles