AngularJS过滤器

来源：互联网发布：北京同德软件编辑：程序博客网时间：2024/06/05 10:17

AngularJS的filter，中文名“过滤器”是用来过滤变量的值，在页面中渲染出我们自己想要的结果，今天我们来说说AngularJS中的filter过滤器吧.....

一、filter简介

filter指格式化数据，其语法：

{{expression | filter }}    ==>   {{表达式 | 过滤器}}

带有参数的语法：

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

filter后面位参数列表，多个参数之间有冒号隔开。

二、AngularJS内置的filter

AngularJS的内置过滤器分别是currency, date, filter, json, limitTo, uppercase， lowercase, number, orderBy

下面我们说说几个比较常用的：

1.子浮串大小写转换过滤器(uppercase|lowercase)：

<div ng-bind="name | uppercase"></div> <div ng-bind="name | lowercase"></div>

//js代码var app = angular.module("myApp", []);    app.controller("myCtrl", ["$scope", function($scope) {      $scope.name = ""John Smith""}

上述代码中uppercase意思为“John Smith”字母全部为大写，而lowercase的意思为“John Smith”字母全为小写。

2.长度限制过滤器(limitTo)：

长度：<input type="text" ng-model="length"><br />        位置：<input type="text" ng-model="index">        <br />        <ul>            <li ng-repeat="u in users | limitTo:length:index">                <span ng-bind="u.userID"></span>****                <span ng-bind="u.username"></span>****                <span ng-bind="u.nickname"></span>            </li>        </ul>

上述代码中的"limitTo:length:index"其中index值得是截取的长度，从最前面第一个字符开始截取。

3.时间过滤器（date）：

 <div>     日期格式化：通常情况下，需要按照用户的要求进行输出，这时候就会附带参数      y/M/d/h/m/s/E 年/月/日/时/分/秒/星期      <br />      <span ng-bind="date | date:'yyyy年MM月dd日 hh:mm:ss'"></span><br />      <span ng-bind="date | date:'yyyy年MM月dd日'"></span><br />      <span ng-bind="date | date:'hh:mm:ss'"></span><br /> </div>

4.货币格式过滤器（currency）：

<div>      <p>         对于要展示的货币数据【原始数据就是数字】         按照指定的货币格式进行输出       </p>       货币过滤器输出：<span ng-bind="price | currency"></span><br />       货币过滤器输出：<span ng-bind="price | currency:'人命币￥'"></span><br />       货币过滤器输出：<span ng-bind="price | currency:'￥':3"></span><br /></div>

5.JSON过滤器（json）：

json过滤器可以将一个JSON或者JavaScript对象转换成字符串。

<span ng-bind="users|json"></span>

可以这样使用：{{ {"name":"dreamapple","language":"AngularJS"} | json}}
返回结果为：{ "name": "dreamapple", "language": "AngularJS" }

6.排序过滤器（orderBy）：

<div>     <h3>排序输出</h3>      排序关键词：<input type="text" ng-model="keyword">      排序顺序：<input type="checkbox" ng-model="sort">倒序     <br />     <ul>         <li ng-repeat="u in users | orderBy:keyword:sort">            <span ng-bind="u.userID"></span>****            <span ng-bind="u.username"></span>****            <span ng-bind="u.nickname"></span>         </li>     </ul></div>

“orderBy:keyword”:即通过关键字排序“sort”为倒序，也可以通过关键字来进行筛选。

三、自定义过滤器

用简单的案例来了解一下自定义过滤器

<!DOCTYPE html><html ng-app="myApp"><head>    <meta charset="UTF-8">    <title>自定义过滤器</title>    <script src="js/lib/AngularJS/angular.min.js"></script></head><body><div ng-controller="myCtrl">    <div ng-bind="name"></div>    <div ng-bind="name | myfilter"></div> <!-- myfilter为自定义过滤器的名字-->    <div ng-bind="name | myfilter1"></div></div><script>    var app = angular.module("myApp",[]);    app.filter("myfilter",function(){        return function(value){            value = value.toUpperCase();//渲染的内容为大写字母            return value;//返回值        }    });    app.filter("myfilter1",function(){        return function(value){            value = value.toLowerCase();//渲染的内容为小写字母            return value;        }    });    app.controller("myCtrl",function($scope){        $scope.name = "jerry Smiht";    })</script></body></html>

下面用一张图来更加形象的说明自定义函数的运行过程

这就是我对于过滤器的理解，希望能够对大家有帮助。

0 0