AngularJS中filter的使用实例详解

站长资源 2024/11/28 佚名

2 0 1

AngularJS中filter的使用实例详解

一、格式化数字为货币格式。

<div>{{money|currency:"$"}}</div> 
<div>{{money|currency:"RMB"}}</div>

script：

app.controller("crl", function($scope, $filter) { 
    $scope.money="4545"; 
  });

显示为

二、lowercase 格式化字符串为小写。

姓名为 {{ lastName | lowercase }}

app.controller("crl", function($scope, $filter) { 
   $scope.lastName ="AAA"; 
});

显示为

aaa

三、uppercase 格式化字符串为大写。

姓名为 {{ lastName | uppercase }}



app.controller("crl", function($scope, $filter) { 
   $scope.lastName ="aaa"; 
});

显示为

AAA

四、filter 从数组项中选择一个子集。

<div>{{array|filter:"s"}}</div> 
<div ng-repeat="item in array|filter:'s'">{{item.name}}</div>

app.controller("crl", function($scope, $filter) { 
    $scope.array = [ { 
      name : 'Tobias' 
    }, { 
      name : 'Jeff' 
    }, { 
      name : 'Brian' 
    }, { 
      name : 'Igor' 
    }, { 
      name : 'James' 
    }, { 
      name : 'Brad' 
    } ]; 
  });

显示为

[{"name":"Tobias"},{"name":"James"}] 
Tobias 
James

五、orderBy 根据某个表达式排列数组。

输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。模型名字前加负号为降序，默认为升序

<div ng-repeat="item in array|orderBy:'-name'">降序  {{item.name}}</div> 
  <div ng-repeat="item in array|orderBy:'name'">升序   {{item.name}}</div>

app.controller("crl", function($scope, $filter) { 
    $scope.array = [ { 
      name : 'Tobias',age:"18" 
    }, { 
      name : 'Jeff',age:"19" 
    }, { 
      name : 'Brian',age:"19" 
    }, { 
      name : 'Igor',age:"55" 
    }, { 
      name : 'James',age:"19" 
    }, { 
      name : 'Brad',age:"19" 
    } ,{ 
      name : 'aaas',age:"19" 
    }]; 
  });

显示为

降序 Tobias 
降序 Jeff 
降序 James 
降序 Igor 
降序 Brian 
降序 Brad 
降序 aaas 
升序 aaas 
升序 Brad 
升序 Brian 
升序 Igor 
升序 James 
升序 Jeff 
升序 Tobias

5.1.多个模型排序（先按名字排序在按年龄排序）

<div ng-repeat="item in array|orderBy:['name','age']">升序   {{item.name}}{{item.age}}</div>


app.controller("crl", function($scope, $filter) { 
    $scope.array = [ { 
      name : 'Tobias',age:"18" 
    }, { 
      name : 'Jeff',age:"19" 
    }, { 
      name : 'Brian',age:"19" 
    }, { 
      name : 'Igor',age:"55" 
    }, { 
      name : 'James',age:"19" 
    }, { 
      name : 'adsd',age:"19" 
    } ,{ 
      name : 'adsd',age:"20" 
    }]; 
 
  });

显示为

升序 adsd19 
升序 adsd20 
升序 Brian19 
升序 Igor55 
升序 James19 
升序 Jeff19 
升序 Tobias18

以上就是AngularJS filter的使用实例，如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

AngularJS实战之filter,AngularJS,filter的使用方法

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“AngularJS中filter的使用实例详解”

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年11月28日

AngularJS中filter的使用实例详解

用nodejs实现json和jsonp服务的方法

微信小程序实现表单校验功能

评论“AngularJS中filter的使用实例详解”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接