DDR爱好者之家 Design By 杰米
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的使用实例,如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年11月27日
2024年11月27日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]