AngularJS过滤器使用分析

本文通过一个例子说明了AngularJS滤波器的使用。分享给大家参考，如下：

在开发中，我们经常会遇到这样的场景

如果用户的性别分为“男”和“女”，数据库中存储的值为1和0，那么当用户检查自己的性别时，后端返回的值自然是1或0，前端应该转换为“男”或“女”再显示；

如果我想换一个羽毛球拍，一只猫身上有几十个牌子的羽毛球拍。我想单独查一下YONEX品牌的羽毛球拍；

买了羽毛球拍之后，还想买一桶羽毛球，点击根据销量展示商品；

以上三种场景分别对数据进行转换/过滤/排序，也就是数据的格式化。AngularJS的过滤器就是用来做这个的。

内置过滤器

AngularJS有许多内置的过滤器，在HTML模板的绑定符号{{}}中由|调用

如果字母被转换为大写：

$ scope。name='王美健' {{name |大写} }//输出要以千为单位书写的王美健数字：

$ scope . num=12345678 { { num | num } }//输出12，345，678日期格式：

$ scope。date=new date(){ { date | date : ' YY-mm-DD ' } }//输出2015年11月19日格式化为货币的数字：

$ scope . num=987654321 { { num | currency : ' ' }//Output 987，654，321.00demo示例：http://runjs.cn/code/ztgq7fwg

稍微复杂一点的过滤器——“过滤器”可以返回给定数组的子集，并且它接收一个参数，该参数可以是字符串、对象或函数

String:返回包含该字符串的所有元素，如果要返回不包含该字符串的元素，请添加！

演示：

{{['Wang '，' mei '，' Jian ']| filter : ' a ' }//返回包含字母a的元素['Wang '，' Jian ']. Object:Angular将待过滤对象的属性与该对象中同名的属性进行比较，如果属性值为字符串，则判断是否包含该字符串(注意这里包含。

演示：

{{ [ { name: '王美健'，sex: 'boy' }，{ name: 'bokeyuan '，sex : ' sex ' }]| filter : { sex 3360 ' bo ' }//output[{ ' name ' : '王美健'，' sex' :' boy'}]函数：对每个元素执行此函数并返回一个非false值

演示：

$ scope . GetNumber=function(n){ return！isNaN(n)；} {{['demo '，2，3]| filter : getnumber } }//输出[2，3]自定义筛选器

当内置功能不能满足您的业务需求时，您需要定制一个过滤器。自定义过滤器返回一个函数。函数的参数是HTML模板左侧的数据，它将自动传递到过滤器中

例如，要求将句子中每个单词的首字母大写

html ng-app=' app ' head title angular js筛选器入门/title script type=' text/JavaScript ' src=' http:http://cdn.bootcss.com/angular.js/1.5.0-beta.1/angular . js '/script/head body ng-controller=' my controller ' p { { str |大写}}/p！-输出你好，欢迎来到博客园！-脚本类型=' text/JavaScript ' var app=angular . module(' app '，[])。controller('myController '，['$scope '，function($scope){ $scope.str='您好，欢迎来到bokeyuan！'}]) .filter('大写'，function(){ return function(str){ var arr=str . split(/\ s/)；for(var I=0；一、长度；i ) { arr[i]=arr[i]。substr(0，1)。toUpperCase() arr[i]。切片(1)；};返回逮捕。join(')} })/script/body/html需要注意的是，当内置过滤器' filter '的参数为函数时，将对数组的每个元素执行该函数，用户自定义过滤器为返回数组对象的函数。

更多对AngularJS感兴趣的读者可以查看本网站的主题：《AngularJS入门与进阶教程》和《AngularJS MVC架构总结》

希望本文对AngularJS编程有所帮助。