AngularJS中filter的使用实例详解
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的使用实例,如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
相关文章
angular6根据environments配置文件更改开发所需要的环境的方法
这篇文章主要介绍了angular6根据environments配置文件更改开发所需要的环境的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2019-03-03后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
这篇文章主要介绍了后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法的相关资料,需要的朋友可以参考下2016-07-07详解angular2采用自定义指令(Directive)方式加载jquery插件
本篇文章主要介绍了详解angular2采用自定义指令(Directive)方式加载jquery插件 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。2017-02-02详解Angular Forms中自定义ngModel绑定值的方式
在Angular应用中有两种方式来实现表单绑定,但是对于一些特殊的表单控件没法实现,这篇文章主要介绍了详解Angular Forms中自定义ngModel绑定值的方式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2018-12-12
最新评论