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>