AngularJS--过滤器

Posted 2020-08-16 嫣然一笑

一、过滤器

　　过滤器（filter）：通过某种规则过滤一些数据，得到自己想要的结果。

　　下面来讲一下AngularJS中的一些过滤器：

　　1. currency（货币过滤器）

　　　　用法：{{数字 | currency ：“代表金钱的符号或者英文” ：小数点后保留几位（会四舍五入）}}

　　　　举例：{{1000|currency：“￥”：2}} 

　　　　结果：￥1,000.00

　　2. date(日期)

　　　　用法：{{时间|date:‘时间的格式‘}}

　　　　举例：{{‘1477838110579‘|date:‘yyyy-MM-dd hh:mm:ss EEEE‘}}

　　　　结果：2016-10-30 10:35:10 Sunday

　　3. json（json格式）

　　　　用法：{{json数据|json}}

　　　　举例：<pre>{{friends|json}}</pre>

<script>
    var app=angular.module("myApp",[]);
    app.controller("myCtrl",function($scope){
        $scope.friends=[
            {name:"John",phone:"555-1276"},
            {name:"Mark",phone:"655-1276"},
            {name:"Annie",phone:"955-1276"},
            {name:"Joe",phone:"255-1276"},
            {name:"Tom",phone:"655-1276"},
            {name:"Lilie",phone:"855-1276"},
        ]
    })
</scripe>

　　　　结果：

[
  {
    "name": "John",
    "phone": "555-1276"
  },
  {
    "name": "Mark",
    "phone": "655-1276"
  },
  {
    "name": "Annie",
    "phone": "955-1276"
  },
  {
    "name": "Joe",
    "phone": "255-1276"
  },
  {
    "name": "Tom",
    "phone": "655-1276"
  },
  {
    "name": "Lilie",
    "phone": "855-1276"
  }
]

　　4. limitTo(限制个数)

　　　　用法：{{数字/字符串/数组 | limitTo：3:1}}

　　　　举例：{{[1,2,3,4,5,6,7,8]|limitTo:3:1}}

　　　　结果：[2,3,4]

　　5. lowercase（转小写）、uppercase（转大写）

　　　　用法：{{‘String’ | lowercase/uppercase}}

　　　　举例：{{"aaa"|uppercase}}

　　　　结果：AAA

　　6. number（数字过滤器）

　　　　用法：{{数字 | number:小数点位数（会四舍五入）}}

　　　　举例：{{1000|number:4}}

　　　　结果：1,000.0000

　　7. filter （筛选）

　　　　用法：{{数据 | filter：{条件}}}

　　　　举例：

<ul>
    <li ng-repeat="item in friends|filter:{name:‘J‘}">
        <span>{{item.name}}</span>
        <span>{{item.phone}}</span>
    </li>
</ul>

　　　　结果：

• John 555-1276
• Joe 255-1276

　　　　说明：{name:"J"}数目只对name属性进行筛选，且筛选属性值中包含J的项

 

　　8. orderBy（排序）

　　　　用法：  {{数据 | orderBy ：条件}}

<ul>
    <li ng-repeat="item in friends|orderBy:‘-phone‘">
        <span>{{item.name}}</span>
        <span>{{item.phone}}</span>
    </li>
</ul>

 　　　　结果：

• Annie 955-1276
• Lilie 855-1276
• Mark 655-1276
• Tom 655-1276
• John 555-1276
• Joe 255-1276

　　说明：‘-phone‘表示 从大到小排序 ‘phone’则为从小到大

　　

二、自定义过滤器

　　

<script>
    var app=angular.module("myApp",[]);
    //过滤器的名称  function
    app.filter(‘myFilter‘,function(){
        //data是传过来的数据
        return function(data){
            return data.toUpperCase();
        }
    })
    app.controller("myCtrl",function($scope,$filter){
        //过滤器名称  要过滤的数据
        $scope.text=$filter("myfilter")("bbb");
    })
</script>