angularJS中filter(过滤器)的使用

关注

原创最新推荐文章于 2026-06-23 09:54:16 发布 4k 阅读 AI 写同款· GEO 优化 ›

AngularJS过滤器的使用详解在本文中，我们提供了创建和使用AngularJS过滤器的详细说明，并给出了相应的源代码示例。在本文中，我们将详细介绍AngularJS过滤器的使用，并提供相应的源代码示例。在上面的例子中，我们定义了一个名为"prefix"的过滤器，它接收两个参数：输入值（input）和前缀文本（prefixText）。过滤器函数接收一个名为"input"的参数，并在函数体内对其进行处理，最后返回转换后的结果。将"name"变量作为输入值传递给"prefix"过滤器，并将字符串"Hello"作为前缀文本传递给过滤器。阅读详情

filter时angular开发经常接触的一个内容，今天在wiki中做一个补全，说一下filter的使用

首先，filter分为angularJS中封装好的filter和自定义filter
自定义的filter包括以下：

1.currency(货币处理)，默认是美元符号

{{num | currency : '￥'}}

2.date(日期格式化)

{{date | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}

参数用来指定所要的格式，y M d h m s E 分别表示年月日时分秒星期，你可以自由组合它们

filter(匹配子串) {{ childrenArray | filter : 4 }} //匹配属性值中含有4的

4.json(格式化Json对象)

{{ jsonTest | json}}

5.limitTo(限制数组长度或字符串长度)

{{ childrenArray | limitTo : 2 }}//将会显示数组中的前两项

lowercase(小写) {{name | lowercase}}

7.uppercase(大写)

{{name | uppercase}}

8.number(格式化数字)
number过滤器可以为一个数字加上千位分割，像这样，123,456,789。同时接收一个参数，可以指定小float类型保留几位小数：
苦于在js里频繁使用toFixed()的同事得救了
9.orderBy(排序)

{{ childrenArray | orderBy : 'age' }}//按age属性值进行排序

封装好的几种中，主要排序，限制长度和日期格式化以及保留小数位比较有用，其余在遇到特定需求的时候，我们可能要自定义过滤器

filter的使用
过滤器在Html中的使用就是标准的表达式后面+ | +filter的名字
比如{{ name | filter}}使用一个filter
或者{{name | filter1 | filter2 | filter3 }}使用多个filter，前一个filter的输出是下一个filter的输入
再或者{{ expression | filter:argument1:argument2:... }} argument1，argument2到argumentN都是filter的参数，这种是为filter传参数
自定义filter
首先要说明，filter是不需要注入到controller中的，就像function一样，可以全局使用
然后用一个例子来说明自定义filter
自定义两个filter如下：

angular.module('starter').filter('dealer',function(){ //将对象数组中每一项的name变为john加编号，编号为从0到数组长度减1，然后将处理后的数组返回
   return function(inputArray){
     for(var i=0;i<inputArray.length;i++){
      inputArray[i].name="John"+i;
   }
    return inputArray;
 }
});
angular.module('starter').filter('littledealer',function(){//将改参数截取到只保留前两位并返回
   return function(param){
     var a = param.substring(0,2);
     return a;
   }
});

在controller中，有数组如下:

  $scope.items=[
  {
    name:"sss",
    age:"123"
  },
  {
    name:"sdd",
    age:"131"
  },
  {
    name:"acs",
    age:"143"
  },
  {
    name:"scx",
    age:"135"
  },
  {
    name:"768",
    age:"asd"
  }
];

在html中，我们把数组循环显示出每项的name字段和age字段，然后用filter过滤一下，html中代码如下：

<ion-view view-title="Dashboard">
  <ion-content class="padding">
     <div style="width: 100%;height: 40px;text-align: center;background-color: transparent;margin-top: 20px;" 
     ng-repeat="x in items |    dealer">
       <label style="margin-left: auto;margin-right: auto;font-size: 0.875rem;color: #4547a8;">{{x.name}}</label><br>
       <label style="margin-left: auto;margin-right: auto;font-size: 0.875rem;color: #4547a8;">{{x.age | littledealer}}</label><br>
     </div>
   </ion-content>
 </ion-view>

由于我们将数组中的每个名字都变为john+编号，且其中每项的年龄字段被截取保留了前位，现在结果为：

过滤器在项目开发中会大量用到，良好的filter使用习惯可以提高开发效率

收录于