AngularJS中filter的使用实例详解
程序员文章站
2022-04-09 22:19:16
angularjs中filter的使用实例详解
一、格式化数字为货币格式。
{{money|currency:"$"}}
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的使用实例，如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
上一篇： Lua中获取table长度问题探讨