AngularJS系列(三)——过滤器(filder)

灰太狼 2022-06-07 23:40 153阅读 0赞

过滤器可以用一个管道字符’|’添加到表达式和指令中。

常用的过滤器有

l  currency：数字转金额

l  uppercase/lowercase：字符串转大小写

l  date：时间格式化

l  json：Json解析

l  limitTo：字符串截取

l  orderBy：排序

l  filter：查找

<div ng-app="myApp"ng-controller="personCtrl">
             
             <p>转金额：{
       {moneys| currency}}</p>
             <p>姓名为（大写）：{
       {fullName()| uppercase}}</p>
             <p>姓名为（小写）：{
       {fullName()| lowercase}}</p>
             <p>时间格式化：{
       {date| date:'yyyy-MM-dd hh:mm:ss'}}</p>
             <p>json解析：{
       {jsonText| json}}</p>
             <p>字符串截取：{
       {fullName()| limitTo:6}}</p>
             <p>根据id正序排序：</p>
             <ling-repeat="x in people | orderBy:'id'">
                       {
       {x.id  + "," + x.name}}
             </li>
             <p>根据id倒序排序：</p>
             <ling-repeat="x in people | orderBy:'id':true">
                       {
       {x.id  + "," + x.name}}
             </li>
             <p>查询id为10的people：</p>
             <ling-repeat="x in people | filter:{id:0}">
                       {
       {x.id  + "," + x.name}}
             </li>
    </div>

![Center][]

自定义过滤器

以下实例自定义一个过滤器 reverse，将字符串反转：

<div ng-app="myApp"ng-controller="myCtrl">
    姓名: {
       { msg | reverse }}
    </div>

[Center]: /images/20220608/cb824cfcbecb4278a34a422b0ece2651.png