您好,登录后才能下订单哦!
本文实例讲述了AngularJS常见过滤器用法。分享给大家供大家参考,具体如下:
过滤器用来格式化需要展示给用户的数据。在HTML中的模板绑定符号 {{ }} 内通过 | 符号来调用过滤器。以下是常用的过滤器。
大小写过滤器
{{ name | uppercase }} 大写过滤器
{{ name | lowercase}} 小写过滤器
实例:(大写过滤器)
<div ng-controller='myController'> 姓氏: <input type="text" ng-model="student.firstName"></br></br> 名字: <input type="text" ng-model="student.lastName"></br></br> 名字转大写: {{student.fullName() | uppercase}} </div> <script> var app=angular.module('app',[]); app.controller('myController',function($scope){ $scope.student={ firstName: "xu", lastName: "xiaohong", fullName:function(){ var studentObject; studentObject = $scope.student; return studentObject.firstName + studentObject.lastName; } }; }); </script>
货币过滤器
currecy 过滤器可以将一个数值格式化为货币格式。用 {{ 123 | currency }} 来将123转化成货币格式。currecy 过滤器允许我们自己设置货币符号。默认情况下会采用客户端所处区域的货币符号,但是也可以自定义货币符号。如下:
<div ng-controller='myController'> Enter fees: <input type="text" ng-model="student.fees"></br> fees: {{student.fees | currency:'¥'}} </div> <script> var app=angular.module('app',[]); app.controller('myController',function($scope){ $scope.student={ fees:500 }; }); </script>
日期过滤器
date 过滤器可以将日期格式化成需要的格式。如下:
<div ng-controller='myController'> {{data | date : 'yyyy-MM-dd hh:mm:ss EEEE'}} </div> <script> var app=angular.module('app',[]); app.controller('myController',function($scope){ $scope.data=new Date(); }); </script>
limitTo过滤器
limitTo过滤器用来截取数组或字符串,接收一个参数用来指定截取的长度。实例:
<body ng-controller="test"> {{ childrenArray | limitTo : 2 }} <script> var app=angular.module('app',[]); app.controller('test',function($scope){ $scope.childrenArray = [ {name:'kimi',age:3}, {name:'cindy',age:4}, {name:'anglar',age:4}, {name:'shitou',age:6}, {name:'tiantian',age:5} ]; }); </script> </body>
orderBy过滤器:
orderBy过滤器可以将一个数组中的元素进行排序,接收一个参数来指定排序规则,参数可以是一个字符串,表示以该属性名称进行排序。可以是一个函数,定义排序属性。还可以是一个数组,表示依次按数组中的属性值进行排序(若按第一项比较的值相等,再按第二项比较),还是拿上面的孩子数组举例:
<div>{{ childrenArray | orderBy : 'age' }}</div> //按age属性值进行排序 <div>{{ childrenArray | orderBy : orderFunc }}</div> //按照函数的返回值进行排序 <div>{{ childrenArray | orderBy : ['age','name'] }}</div> //如果age相同,按照name进行排序
自定义过滤器:
AngularJS编写自定义过滤器的形式和AngularJS的factory service非常相像,一定记得它返回一个对象或者是一个函数即可,编写的时候,只需要一个带有一个以上参数的函数即可。格式大致如下:
app.filter('filter(过滤器)名称',function(){ return function(需要过滤的对象,过滤器参数1,过滤器参数2,...){ //...执行业务逻辑代码 return 处理后的对象; } });
实例:(首字母大写)
{{ 'ginger loves dog treats' | capitalize }} <script> var app=angular.module('app',[]); app.filter('capitalize',function(){ return function(input){ if(input){ return input.charAt(0).toUpperCase() + input.slice(1); } } }) </script>
更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。