Angular过滤器

Angular内置过滤器（filter）

                                                                                                   大家好，这次和大家一起浅谈下Angular内置过滤器

       在我们开发中经常需要在页面显示给用户的信息需要一定处理格式化，才能显示给用户。在angularjs中为我们提供了叫filter的指令，让我们能够很轻易就能做到着一些列的功能，angularjs内部为我们提供了number等很多内置的filter。

    首先，我们需要知道Angular内置有哪几种，这个我们可以去Angular官网API文档上了解一下

如图所示，内置过滤器一共有9中。

1. currency (货币处理)
　　使用currency可以将数字格式化为货币，默认是美元符号，你可以自己传入所需的符号，例如我传入人民币：
<span ng-bind="price | currency">

2. date (日期格式化)
　　原生的js对日期的格式化能力有限，ng提供的date过滤器基本可以满足一般的格式化要求。用法如下：
<span ng-bind="date | date">
　　日期格式化：通常情况下，需要按照用户的要求进行输出，这时候就会附带参数
            y/M/d/h/m/s/E 年/月/日/时/分/秒/星期

       <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 />

3. filter(匹配子串)
　　这个名叫filter的filter用来处理一个数组，然后可以过滤出含有某个子串 的元素，作为一个子数组来返回。可以是字符串数组，也可以是对象数组。如果是对象数组，可以匹配属性的值。它接收一个参数，用来定义子串的匹配规则。下面 举个例子说明一下参数的用法，我用现在特别火的几个孩子定义了一个数组：
app.controller("myCtrl", ["$scope", function($scope) {
        $scope.price = 499.1213;
        $scope.date = new Date();
        $scope.name = "John Smith";
        $scope.users = [
            {userID:1, username:"cat", nickname:"tom"},
            {userID:2, username:"xiaofan", nickname:"张小凡"},
            {userID:3, username:"biyao", nickname:"碧瑶"},
            {userID:4, username:"luxueqi", nickname:"陆雪琪"},
            {userID:5, username:"linjingyu", nickname:"林惊羽"},
            {userID:6, username:"cengshushu", nickname:"曾书书"},
            {userID:7, username:"zhuque", nickname:"朱雀"},
            {userID:8, username:"qinglong", nickname:"青龙"},
            {userID:9, username:"guiwang", nickname:"鬼王"},
            {userID:10, username:"dushen", nickname:"赌神"},
            {userID:11, username:"jinpiner", nickname:"金瓶儿"}
        ]

     <h3>过滤输出</h3>
        关键词：<input type="text" ng-model="keyword">
        <br />
        <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. limitTo(限制数组长度或字符串长度)
　　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>

6. lowercase(小写)
　　把数据转化为全部小写。

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

7. uppercase(大写)
      把数据转化为全部大写。
        <div ng-bind="name | lowercase"></div>

8. number(格式化数字)
　　number过滤器可以为一个数字加上千位分割，像这样，123,456,789。同时接收一个参数，可以指定float类型保留几位小数：
{{ num | number : 2 }}

　　9. orderBy(排序)
　　orderBy过滤器可以将一个数组中的元素进行排序，接收一个参数来指定排序规则，参数可以是一个字符串，表示以该属性名称进行排序。可以是 一个函数，定义排序属性。还可以是一个数组，表示依次按数组中的属性值进行排序（若按第一项比较的值相等，再按第二项比较）