您的位置：首页 > Web前端 > AngularJS

AngularJS中filter的使用实例详解

2017-08-25 14:53 621 查看

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
相关文章推荐
新的分享
章节导航