filter如何在AngularJS中使用
本篇文章为大家展示了filter如何在AngularJS中使用，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
为埇桥区等地区用户提供了全套网页设计制作服务，及埇桥区网站建设行业解决方案。主营业务为成都网站设计、成都做网站、埇桥区网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！
一、格式化数字为货币格式。
{{money|currency:"$"}}
{{money|currency:"RMB"}}
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 从数组项中选择一个子集。
{{array|filter:"s"}}
{{item.name}}
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 根据某个表达式排列数组。
输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。模型名字前加负号为降序，默认为升序
降序 {{item.name}}
升序 {{item.name}} 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.多个模型排序（先按名字排序在按年龄排序）
升序 {{item.name}}{{item.age}}
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
上述内容就是filter如何在AngularJS中使用，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。
分享名称：filter如何在AngularJS中使用
本文地址：
http://chengdu.cdxwcx.cn/article/pepsee.html
