AngularJS实战之filter的使用一
程序员文章站
2022-07-01 18:59:06
...
一、格式化数字为货币格式。
script:
显示为
二、lowercase 格式化字符串为小写。
显示为
aaa
三、uppercase 格式化字符串为大写。
显示为
AAA
四、filter 从数组项中选择一个子集。
显示为
[{"name":"Tobias"},{"name":"James"}]
Tobias
James
五、orderBy 根据某个表达式排列数组。
输入过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中,该过滤器后跟一个冒号和一个模型名称。模型名字前加负号为降序,默认为升序
显示为
降序 Tobias
降序 Jeff
降序 James
降序 Igor
降序 Brian
降序 Brad
降序 aaas
升序 aaas
升序 Brad
升序 Brian
升序 Igor
升序 James
升序 Jeff
升序 Tobias
5.1.多个模型排序(先按名字排序在按年龄排序)
显示为
升序 adsd19
升序 adsd20
升序 Brian19
升序 Igor55
升序 James19
升序 Jeff19
升序 Tobias18
<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
上一篇: 连接查询的几种写法
下一篇: js获取浏览器类型进行判断
推荐阅读
-
Android开发笔记之:一分钟学会使用Logcat调试程序的详解
-
详解Spring Boot实战之Filter实现使用JWT进行接口认证
-
ListView的Adapter使用(绑定数据) 之 自定义每一项的布局去绑定数据
-
iOS App设计模式开发之适配器模式使用的实战演练
-
Android之使用Android-query框架开发实战(一)
-
微信小游戏之使用three.js 绘制一个旋转的三角形
-
iOS App设计模式开发之适配器模式使用的实战演练
-
从零开始搭建前后端分离的NetCore2.2(EF Core CodeFirst+Autofac)+Vue的项目框架之十一Swagger使用一
-
Android开发笔记之:一分钟学会使用Logcat调试程序的详解
-
ListView的Adapter使用(绑定数据) 之 自定义每一项的布局去绑定数据