AngularJS过滤器filter用法分析
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了AngularJS过滤器filter用法分析,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2812字,纯文字阅读大概需要5分钟。
内容图文
![AngularJS过滤器filter用法分析](/upload/InfoBanner/zyjiaocheng/348/081416ccc93c44979749882855717a57.jpg)
本文实例讲述了AngularJS过滤器filter用法。分享给大家供大家参考,具体如下:
在开发中,经常会遇到这样的场景
如用户的性别分为“男”和“女”,在数据库中保存的值为1和0,用户在查看自己的性别时后端返回的值自然是1或0,前端要转换为“男”或“女”再显示出来;
如我要换个羽毛球拍,某猫上羽毛球拍的品牌多达数十种,我想单独查看YONEX这个品牌的羽毛球拍;
买完羽毛球拍我还想买一桶羽毛球,点击按销量排序展示商品;
以上三种场景分别对数据进行了转换/筛选/排序,总而言之就是对数据的格式化,AngularJS的filter就是用来做这个事的。
内置过滤器
AngularJS内置了很多过滤器,在HTML模板的绑定符号{{}}内通过|来调用过滤器
如字母转换成大写:
$scope.name='wangmeijian' {{name | uppercase}} //输出 WANGMEIJIAN
数字转成千分位写法:
$scope.num = 12345678 {{num | number}} //输出 12,345,678
日期格式化:
$scope.date=new Date() {{date | date:'yy-MM-dd'}} //输出 2015-11-19
数字格式化成货币:
$scope.num=987654321 {{num | currency:'¥'}} //输出 ¥987,654,321.00
demo示例:http://runjs.cn/code/ztgq7fwg
稍微复杂一点的过滤器——‘filter',可以返回给定数组的子集,它接收一个参数,这个参数可以是字符串、对象、函数
字符串:返回所有包含这个字符串的元素,想要返回不包含这个字符串的元素则在前面加!
demo:
{{['wang','mei','jian'] | filter:'a'}} // 返回包含字母a的元素 ['wang','jian']
对象:Angular会将待过滤对象的属性与这个对象中的同名属性进行比较,如果属性值是字符串会判断是否包含该字符串(注意这里是包含,并不需要完全相等)
demo:
{{ [ { name: 'wangmeijian', sex: 'boy' }, { name: 'bokeyuan', sex: 'sex' } ] | filter:{ sex: 'bo' } }} //输出 [{"name":"wangmeijian","sex":"boy"}]
函数:对每个元素都执行该函数,返回非假值的元素会出现在新的数组中并返回
demo:
$scope.getNumber = function(n){ return !isNaN(n); } {{ ['demo',2,3] | filter:getNumber}} //输出 [2,3]
自定义过滤器
当内置函数不能满足你的业务需求时,就需要自定义一个过滤器,自定义过滤器返回一个函数,函数的参数就是HTML模板中|左侧的数据,它会自动传入过滤器中
比如需求是将一句话中的每个单词首字母变成大写
<html ng-app='app'> <head> <title>AngularJS过滤器filter入门</title> <script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.5.0-beta.1/angular.js"></script> </head> <body ng-controller='myController'> <p>{{ str | capitalize}}</p> <!--输出 Hello, Welcome To Bokeyuan! --> <script type="text/javascript"> var app = angular.module('app',[]) .controller('myController',['$scope', function($scope){ $scope.str = 'hello, welcome to bokeyuan!' }]) .filter('capitalize', function(){ return function(str){ var arr = str.split(/\s+/); for (var i = 0; i < arr.length; i++) { arr[i] = arr[i].substr(0,1).toUpperCase() + arr[i].slice(1); }; return arr.join(" ") } }) </script> </body> </html>
需要注意的是,内置过滤器‘filter'的参数是函数时,会对数组的每个元素执行该函数,自定义过滤器是对数组对象执行它return的函数。
更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
内容总结
以上是互联网集市为您收集整理的AngularJS过滤器filter用法分析全部内容,希望文章能够帮你解决AngularJS过滤器filter用法分析所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。