AngularJS-过滤器入门

顾名思义，过滤器就是过滤自己想要的内容，排序顺序等等.......

货币过滤：

price | currency  

   直接这样写会发现并不是自己想要的效果，这样过滤的都是整数，在货币中，不可能都是整数，意味着小数部分将      不    会显示，如果拼接.00，又会出现另一种问题，例如过滤的是小数14.0，则会出现14.0.00。

price | currency：' 任何字符'

  后面 可跟单引号，单引号里一个数据的时候，会将字符完全显示出来，不会出现上面将￥符号转化为$

price | currency：' 任何字符，数字'

  数字部分表示后面保留几位小数，完美解决了我们想要的效果的问题

日期过滤：

date | date

  这样过滤的是最原始的输出：2017-04-27T14:01:57.922Z，与理想效果差太多

date | date："'yyyy年MM月dd日 hh:mm:ss'"

 获取单个时间或者日期，也可单独写

date | date："'yyyy年MM月dd日'"

date | date："'hh:mm:ss'"

筛选过滤（关键词）：

filter:

参考代码：

  html部分：

        关键词：<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>

  js部分：

 $scope.users = [
            {userID:1, username:"cat", nickname:"tom"},
            {userID:2, username:"xiaofan", nickname:"张小凡"},
            {userID:3, username:"biyao", nickname:"碧瑶"},
            {userID:4, username:"luxueqi", nickname:"陆雪琪"}

JSON过滤器

 | json

        把数据中的对象，转换成JSON字符串的格式输出展示到页面上
        经常能用于代码程序调试，使用较少！

长度限制过滤器

| limitTo:length:index

length:长度

index:位置

参考代码：

        长度：<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>

字符串大小写转换过滤

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