angularjs-过滤器

最新推荐文章于 2026-05-10 15:42:57 发布

原创最新推荐文章于 2026-05-10 15:42:57 发布 · 636 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

angularjs 同时被 2 个专栏收录

38 篇文章

订阅专栏

angularjs

37 篇文章

订阅专栏

本文详细介绍了AngularJS中的过滤器功能及其使用方法，包括内置过滤器如currency、date、filter等，以及如何自定义过滤器。并通过实例展示了各种过滤器的具体应用。

Filter是用来格式化数据用的。

Filter的基本原型（ ‘|’ 类似于Linux中的管道模式）：

{{ expression | filter }}

Filter可以被链式使用（即连续使用多个filter）：

{{ expression | filter1 | filter2 | ... }}

Filter也可以指定多个参数：

{{ expression | filter:argument1:argument2:... }}

filterFilter（filter）：
用途：过滤数组

方法原型：
function(array, expression, comparator)

用法1（参数expression使用String）：
全文搜索关键字字符串。

 <div ng-init="myArr = [{name:'Tom', age:20}, {name:'Tom Senior', age:50}, {name:'May', age:21}, {name:'Jack', age:20}, {name:'Alice', age:22}]">
 <!-- 参数expression使用String，将全文搜索关键字 'a' -->
 <div ng-repeat="u in myArr | filter:'a' ">
      <p>Name:{{u.name}}</p>
       <p>Age:{{u.age}}</p>
       <br />
   </div>
 </div>

用法2（参数expression使用function）：
按照function返回来过滤。

// 先在Controller中定义function: myFilter
 $scope.myFilter = function (item) {
     return item.age === 20;
 };

 <div ng-repeat="u in myArr | filter:myFilter ">
     <p>Name:{{u.name}}</p>
     <p>Age:{{u.age}}</p>
     <br />
 </div>

用法3（参数expression使用object）：
过滤找到对象object

 <div ng-init="myArr = [{name:'Tom', age:20}, {name:'Tom Senior', age:50}, {name:'May', age:21}, {name:'Jack', age:20}, {name:'Alice', age:22}]">
   <div ng-repeat="u in myArr | filter:{age: 21} ">
         <p>Name:{{u.name}}</p>
         <p>Age:{{u.age}}</p>
         <br />
 </div>
 </div>

用法4（指定comparator为true或false）：
大小写是否敏感。

<div ng-init="myArr = [{name:'Tom', age:20}, {name:'Tom Senior', age:50}, {name:'May', age:21}, {name:'Jack', age:20}, {name:'Alice', age:22}]">
     Name:<input ng-model="yourName" />
      <!-- 指定comparator为false或者undefined，即为默认值可不传，将以大小写不敏感的方式匹配任意内容 -->
      <!-- 可以试试把下面代码的comparator为true，true即大小写及内容均需完全匹配 -->
     <div ng-repeat="u in myArr | filter:{name:yourName}:false ">
         <p>Name:{{u.name}}</p>
         <p>Age:{{u.age}}</p>
         <br />
     </div>
 </div>

用法5（指定comparator为function）：
先在Controller中定义function:myComparator, 此function将能匹配大小写不敏感的内容，但与comparator为false的情况不同的是，comparator必须匹配全文

 // 先在Controller中定义function:myComparator, 此function将能匹配大小写不敏感的内容，但与comparator为false的情况不同的是，comparator必须匹配全文
 $scope.myComparator = function (expected, actual) {
      return angular.equals(expected.toLowerCase(), actual.toLowerCase());
  }

  <div ng-init="myArr = [{name:'Tom', age:20}, {name:'Tom Senior', age:50}, {name:'May', age:21}, {name:'Jack', age:20}, {name:'Alice', age:22}]">
      Name:<input ng-model="yourName" />
      <div ng-repeat="u in myArr | filter:{name:yourName}:myComparator ">
          <p>Name:{{u.name}}</p>
         <p>Age:{{u.age}}</p>
         <br />
     </div>
 </div>

Filter:
Ng里的过滤器。

常见过滤器：
currency：把一个数字格式化成货币模式（如$1,234.56）。当没有提供任何货币符号时，默认使用当前区域的符号。
使用：

HTML：{{ currency_expression | currency:symbol:fractionSize}}
JS：$filter(“currency”)(amount,symbol,fractionSize);

amount：数值，过滤的值。
symbol：字符串，要显示的货币符号或标识符。
fractionSize：数值，整数的小数位数，默认为当前的最大位数。

date：基于需要的格式将时间格式化成字符串。
使用：

HTML：{{date_expression | date:format:timezone}}
JS：$filter(“date”)(date,format,timezone);

date：格式化为日期的日期对象。
如果没有指定输入的时区字符串，时间则是当地时间。
format：格式规则/格式。
timezone：时区。

filter：从数组中选出一个子集，并将其作为一个新数组返回。
使用：

HTML：{{filter_expression | filter:expression:comparator}}
JS：$filter(“filter”)(array,expression,comparator);

array：被过滤的数组。
expression：字符串/对象/函数，用于从数组中选择数据的判断表达式。
使用$可以匹配任何字段。
comparator：函数/Boolean/undefined，
用于确定预期的值（从filter表达式返回）和实际的值（数组中的对象）进行比较，
应视为匹配。function(actual,expected);

json：允许将一个javascript对象转换为json字符串。
使用：

HTML：{{json_expression | json:spacing}}
JS：$filter(“json”)(object,spacing);

object：过滤的对象。
spacing：每个缩进的空格数，默认为2。

limitTo：创建一个只包含指定数目元素的数组或字符串。
元素是按指定的值和符号（+或-）从数组、字符串或数字的开头或结尾获取的。
如果输入一个数字，则转换为字符串。
使用：

HTML：{{limitTo_expression | limitTo:limit:begin}}
JS：$filter(“limitTo”)(input,limit,begin);

input：限制的数组，字符串，数字。
limit：限制的长度。
begin：限制长度开始的位置（根据索引）。

lowercase：将字符串转换为小写。
使用：

HTML：{{lowercase_expression | lowercase}}
JS：$filter(“lowercase”)(input);

Input：过滤的字符串。

number：将数值转换为文本。
如果输入是null或undefined，那么其将被返回。如果输入的是无穷（正无穷/负无穷），将会返回无穷大的符号“∞”。如果输入不是一个数字，返回一个空字符串。
使用：

HTML：{{number_expression | number:fractionSize}}
JS：$filter(“number”)(number,fractionSize);

number：转换的数值。
fractionSize：数值，整数的小数位数，默认为当前的最大位数。在默认的区域设置的情况下这个数值是3。

orderBy：通过判断表达式将指定的数组进行排序。它是按字符串的字母顺序和数值的数字排序的。

注意：如果你发现数字没有按预期排序，请确保它们实际上是被保存为数字而不是字符串。

使用：

HTML：{{orderBy_expression | orderBy:expression:reverse}}
JS：$filter(“orderBy”)(array,expression,reverse);

array：排序的数组。
expression：字符串/函数/数组，用来确定元素顺序的表达式。
reverse：boolean，颠倒数组的顺序。默认为false。

uppercase：将字符串转换为大写。
使用：

HTML：{{uppercase_expression |uppercase}}
JS：$filter(“uppercase”)(input);

Input：过滤的字符串。

自带filter使用代码：

 <div ng-app="Demo" ng-controller="testCtrl as ctrl">
     <!-- HTML: {{ctrl.currencyValue | currency:"USD$":1}} -->
     {{ctrl.currencyValue}}
     <!-- HTML: {{ctrl.dateValue | date:"yyyy-MM-dd"}} -->
     {{ctrl.dateValue}}
     <!-- HTML: <div ng-repeat="i in newArr = (ctrl.arr | filter:'2')">{{i}}</div> -->
     <div ng-repeat="i in ctrl.newArr">{{i}}</div>
     <!-- HTML: <div ng-repeat="i in newArr = (ctrl.arr | filter:{check:true})">{{i}}</div> -->
     <div ng-repeat="i in ctrl._newArr">{{i}}</div>
     {{ctrl.obj | json}}
     <!-- HTML: <div ng-repeat="i in ctrl.arr | limitTo:3:2">{{i}}</div> -->
     <div ng-repeat="i in ctrl.secondNewArr">{{i}}</div>
     <!-- HTML: {{ctrl.str | lowercase}} -->
     {{ctrl.str}}
     <!-- HTML: <div ng-repeat="i in ctrl.arr | orderBy:'name':true">{{i}}</div> -->
     <div ng-repeat="i in ctrl.thirdNewArr">{{i}}</div>
     <!-- HTML: {{ctrl.str | uppercase}} -->
     {{ctrl.newStr}}
  </div>

自定义过滤器

基本代码：

  angular.module(“x”,[]).filter(“filterName”,[“dependancy”,function(dependancy){
       return function(value){
       　　//your code   return the data which passed filter（返回过滤后的数据）
　　};
  }]);

filterName：过滤器名称。
dependency：注入的服务。
value：需要过滤的数据。

filter的自定义方式很简单，使用module的filter方法，返回一个函数，该函数接收输入值，并返回处理后的结果。比如我需要一个过滤器，它可以返回一个数组中下标为奇数的元素，代码如下：

app.filter('odditems',function(){
    return function(inputArray){
        var array = [];
        for(var i=0;i<inputArray.length;i++){
            if(i%2!==0){
                array.push(inputArray[i]);
            }
        }
        return array;
    }
});

格式就是这样，你的处理逻辑就写在内部的那个闭包函数中。你也可以让自己的过滤器接收参数，参数就定义在return的那个函数中，作为第二个参数，或者更多个参数也可以。

例子：


<div ng-app="Demo" ng-controller="testCtrl as ctrl">
    <div ng-repeat="i in newArr=(ctrl.arr | myFilter)">
       {{i.value}}
    </div>
  </div>

  (function () {
    angular.module("Demo", [])
    .filter("myFilter",myFilter)
    .controller("testCtrl", ["$filter",testCtrl]);

    function myFilter(){
       return function(value){
          var arr = [];
          angular.forEach(value,function(item,index){ if(item.value.indexOf("this")>=0){ arr.push(item); } });
          return arr;
      }
    };

    function testCtrl($filter) {
        this.arr = [{"value":"this is a."},{"value":"that is b."},{"value":"this is c."},{"value":"that is a."}];
    };
  }());

这里对数组arr进行过滤，把数组中对象value属性的值含有”this“文本的对象都放进个新数组并返回该数组。

参考：
AngularJs filter 过滤器

常用过滤器例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>My AngularJS App</title>
    <script src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/angular.min.js"></script>
    <script src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/angular-route.min.js"></script>
</head>

<body>
<div ng-app="myApp">

    <!-- 向表达式添加过滤器：可以通过一个管道字符(|)和一个过滤器添加到表达式中-->
    <p>将字符串转换为大小写：</p>
    <div ng-controller="uppercaseController">
        <p>姓名为 {{ person.lastName | uppercase }}</p>
    </div>
    <div ng-controller="lowercaseController">
        <p>姓名为 {{ person.lastName | lowercase }}</p>
    </div>

    <p>货币过滤：</p>
    <div ng-controller="costController">
        数量：<input type="number" ng-model="quantity">
        价格：<input type="number" ng-model="price">
        <p>总价 = {{ (quantity * price) | currency }}</p>
        <!--格式化为货币，默认单位符号为 '$', 小数默认2位-->
        {{250 |currency:"RMB ￥":1}}
        <!--格式化为货币，指定单位符号为 'RMB ￥', 小数默认2位，这里指定保留一位-->
    </div>

    <!-- 向指令添加过滤器：可以通过一个管道字符(|)和一个过滤器添加到指令中-->
    <p>按国家的字母顺序排序对象：</p>
    <div ng-controller="namesController">
        <p>循环对象：</p>
        <ul>
            <li ng-repeat="x in names | orderBy:'country'">
                {{ x.name + ', ' + x.country }}
            </li>
        </ul>

        <!--json格式过滤-->
        <p>json格式过滤：</p>
        {{jsonText | json}} <br/>

        <!--date格式过滤-->
        <p>date格式过滤：</p>
        <span>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss'}}</span><br/>

        <!--number格式过滤：参数：指定小float类型保留几位小数-->
        <p>number格式过滤：保留一位小数</p>
        {{1.2345678 |number:1}}<br/>

        <!--字符串截取-->
        <p>字符串截取：</p>
        {{ "i love tank" | limitTo:6 }}<br/>
        {{ "i love tank" | limitTo:-6 }}<br/>

        <!--对象排序：降序-->
        <p>对象排序：降序：orderBy:'id':true</p>
        {{
        [{"age": 20,"id": 10,"name": "iphone"},
        {"age": 12,"id": 11,"name": "sunm xing"},
        {"age": 44,"id": 12,"name": "test abc"}] | orderBy:'id':true
        }}
        <br/>

        <!--对象排序：升序：默认升序-->
        <p>对象排序：默认升序：orderBy:'id'</p>
        {{
        [{"age": 20,"id": 10,"name": "iphone"},
        {"age": 12,"id": 11,"name": "sunm xing"},
        {"age": 44,"id": 12,"name": "test abc"}] | orderBy:'id'
        }}
    </div>

    <p>按输入的字母显示对象：</p>
    <div ng-controller="namesFilterController">
        <p>输入过滤：filter 过滤器从数组中选择一个子集，
            通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。未指定属性，全文搜索关键字</p>
        <p><input type="text" ng-model="name"></p>
        <ul>
            <li ng-repeat="x in names | filter:name | orderBy:'country':true">
                {{ (x.name | uppercase) + ', ' + x.country }}
            </li>
        </ul>
        <p>name筛选：指定了筛选name，name中搜索关键字</p>
        <ul>
            <li ng-repeat="x in names | filter:{'name':name} | orderBy:'country':true">
                {{ (x.name | uppercase) + ', ' + x.country }}
            </li>
        </ul>

        {{
        [{"age": 20,"id": 10,"name": "iphone"},
        {"age": 12,"id": 11,"name": "sunm"},
        {"age": 44,"id": 12,"name": "test abc"}
        ] | filter:{'name':'sunm'}<!--指定了筛选名字为sunm-->
        }}
    </div>

    <br>

    <div ng-controller="childController">
        <!--用来处理一个数组，然后可以过滤出含有某个子串的元素，作为一个子数组来返回。
        可以是字符串数组，也可以是对象数组。
        如果是对象数组，可以匹配属性的值。它接收一个参数，用来定义子串的匹配规则。-->
        {{ childrenArray | filter : 'a' }} <!--//匹配属性值中含有a的-->
        <br>
        {{ childrenArray | filter : 4 }}  <!--//匹配属性值中含有4的-->
        <br>
        {{ childrenArray | filter : {name : 'i'} }} <!--//参数是对象，匹配name属性中含有i的-->
        <br>
        {{childrenArray | filter : func }} <!-- //参数是函数，指定返回age>4的-->
        <br>
        <br>
        <div>{{ childrenArray | orderBy : 'age' }}</div>
        <!--//按age属性值进行排序-->
        <br>
        <div>{{ childrenArray | orderBy : orderFunc }}</div>
        <!--//按照函数的返回值进行排序-->
        <br>
        <div>{{ childrenArray | orderBy : ['age','name'] }}</div>
        <!--//如果age相同，按照name进行排序-->
    </div>
</div>

<script src="angular.min.js"></script>
<script type="application/javascript">
    var myApp = angular.module('myApp', []);
    myApp.controller('uppercaseController', function ($scope) {
        $scope.person = {
            firstName: "John",
            lastName: "Doe"
        };
    });
    myApp.controller('lowercaseController', function ($scope) {
        $scope.person = {
            firstName: "John",
            lastName: "Doe"
        };
    });
    myApp.controller('costController', function ($scope) {
        $scope.quantity = 1;
        $scope.price = 9.99;
    });
    myApp.controller('namesController', function ($scope) {
        $scope.names = [
            {name: 'Jani', country: 'Norway'},
            {name: 'Hege', country: 'Sweden'},
            {name: 'Kai', country: 'Denmark'}
        ];
        $scope.jsonText = {foo: "bar", baz: 23};
    });
    myApp.controller('namesFilterController', function ($scope) {
        $scope.names = [
            {name: 'Jani', country: 'Norway'},
            {name: 'Hege', country: 'Sweden'},
            {name: 'Kai', country: 'Denmark'}
        ];
    });
    myApp.controller("childController", function ($scope) {
        $scope.childrenArray = [
            {name: 'kimi', age: 3},
            {name: 'cindy', age: 4},
            {name: 'anglar', age: 4},
            {name: 'shitou', age: 6},
            {name: 'tiantian', age: 5}
        ];
        $scope.func = function (e) {
            return e.age > 4;
        };
        $scope.orderFunc = function (e) {
            return e.age;
        };
    });
</script>
</body>
</html>