本篇文章为大家展示了filter如何在AngularJS中使用,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
一、格式化数字为货币格式。
<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
上述内容就是filter如何在AngularJS中使用,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注亿速云行业资讯频道。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。