Angular过滤器

过滤器（filter）作用就是接收一个参数，通过某个规则函数进行处理，然后返回处理后的结果。主要用在数据的格式化上，例如获取一个数组中的json对象，对数组中的元素进行排序等。angular有内置的过滤器，如：currency(货币)、date(日期)、filter(子符串匹配)、json(格式化json对象)、limitTo(限制个数)、uppercase(大写)、lowercase(小写)、number(数字)、orderBy(排序)。除此之外还可以自定义过滤器，可以满足任何要求的数据处理。以下简单介绍过滤器的使用方法
过滤器在商品的筛选过程中使用的很多，比如淘宝的商品筛选、购物车等等
1货币过滤器currency
原始数据输出为12；
货币过滤器1输出为 12.00；货币过滤器2输出为￥12.00；若 scope.price=123.1231
则货币过滤器3输出为$123.123；
( “ | ” 为格式化符号 )

原始输出数据的方式：<span ng-bind="price">
货币过滤器输出1：<span ng-bind="price | currency">span>
长度：<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>
货币过滤器输出2：<span ng-bind="price | currency:'人民币￥'">span>设置符号货币过滤器输出3：<span ng-bind="price | currency:'￥':3">span>可设置小数点后保留几位
$scope.price=12

2日期时间过滤器date
原始输出：”2017-04-29T13:08:23.027Z”
日期格式化：Apr 29, 2017
日期格式化：通常情况下，需要按照用户的要求进行输出，这时候就会附带参数 y/M/d/h/m/s/E 年/月/日/时/分/秒/星期
2017年04月29日 09:08:23
2017年04月29日
09:08:23

<span ng-bind="date | date:'yyyy年MM月dd日 hh:mm:ss'">span>
<span ng-bind="date | date:'yyyy年MM月dd日'">span>
<span ng-bind="date | date:'hh:mm:ss'">span>

3.过滤输出
关键词：

1—cat—tom—（过滤出来的）

 输入关键词：<input type="text" ng-model="keyword">
<ul>     
   <li ng-repeat="u in users | filter:keyword">
       <span ng-bind="u.userID">span>---
       <span ng-bind="u.username">span>---
       <span ng-bind="u.nickname">span>
   li>
ul>

4.JSON过滤器（把数据中的对象，转换成JSON字符串的格式输出展示到页面上
经常能用于代码程序调试）
可将数组中的json对象以字符串的形式输出

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

5.长度限制过滤器
长度：
截取长度
位置：
从哪个位置开始
1—cat—tom
2—mouse—jerry （过滤出来的）

长度：<input type="text" ng-model="length">
位置：<input type="text" ng-model="index">
      <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>

6.字符串大小写转换过滤器
John Smith
JOHN SMITH
john smith

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

7.排序输出
排序关键词：
排序顺序：倒序
2—mouse—jerry （过滤出来的）

排序关键词：<input type="text" ng-model="keyword">
排序顺序：<input type="checkbox" ng-model="sort">倒序
          <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>