本文主要介绍Angular的相关内容。Js过滤器和自定义过滤器，并分享给大家参考和学习。下面我们来看看详细的介绍：

一、AngularJS的过滤：

大写|小写：大小写转换过滤json:json格式过滤日期：日期格式过滤数字：数字格式过滤电流：货币格式过滤过滤器：查找限制：字符串对象截取订购By:对象排序！DOCTYPE html html lang=' zh _ CN ' head meta charset=' UTF-8 ' title angular基础/title/head body div ng-app=' myApp '！-向表达式添加过滤器：可以通过一个管道字符(|)和一个过滤器添加到表达式中- p将字符串转换为大小写：/p div ng-控制器='上秒控制器' p姓名为{{ person.lastName |大写} }/p/div ng-controller=“下seccontroller”p姓名为{{ person.lastName |小写} } p/div p货币过滤：/p div ng-控制器='成本控制器'数量：输入类型='数量ng-型号='数量'价格：输入类型='数字ng-型号='价格p总价={{(数量*价格)|币种} }/p { { 250 |币种： '人民币' }} /div！-向指令添加过滤器：可以通过一个管道字符(|)和一个过滤器添加到指令中- p按国家的字母顺序排序对象：/p div ng-controller=' name controller ' p循环对象：/p ul Li ng-重复=' x in name | order by : ' country ' ' { { x . name '，' x.country }} /li /ul！json格式过滤- {{jsonText | json}} br/！-日期格式过滤- span{{1288323623006 |日期： ' yyyy-MM-DD hh :MM :s ' }/span br/！-号码格式过滤- {{1.2345678 |number:1}}br/！-字符串截取- { '我爱坦克| limitTo:6 }}br/{ '我爱坦克| limitTo:-6 }}br/！-对象排序：降序- {{ [{'age': 20，id': 10，name': 'iphone'}，{'age': 12，id': 11，name': 'sunm xing'}，{'age': 44，id': 12，name ' : ' test ABC ' }]| order by : ' id ' 33: '对象排序：升序- {{ [{'age': 20，id': 10，name': 'iphone'}，{'age': 12，id': 11，name': 'sunm xing'}，{'age': 44，id': 12，name ' : ' test ABC ' }]| order by : ' id ' } }/div p按输入的字母显示对象：/p div ng-controller=' names filter controller ' p输入过滤：/p pinput type=' text ' ng-model=' name '/p ul Li ng-repeat=' x in names | 筛选器：名称|按：“国家”排序： true “(x . name |大写) '，' x.country }} /li /ul pname筛选：/p ul Li ng-repeat=' x in names | filter : { ' name ' : name } | order by : ' country ' : rue '(x . name |大写) '，' x . country } }/Li/ul {[{ ' age ' : 20，id': 10，name ' : ' iphone ' }，{'age': 12，id ' 3333330myapp。 控制器('上seccontroller '，函数($ scope){ $ scope。person={名字： ' John '，姓氏： ' Doe ' }；});myapp。控制器(' lowerseccontroller '，函数($ scope){ $ scope。person={名字： ' John '，姓氏： ' Doe ' }；});myapp。控制器('成本控制器'，功能($ scope){ $ scope。数量=1；$ scope . price=9.99 })；myapp。controller(' name controller '，function($ scope){ $ scope。name=[{name: ' Jani '，country:'Norway'}，{name: '和歌，country: '瑞典}，{姓名：'Kai '，国家： '丹麦' }];$scope.jsonText={foo:'bar '，baz :23 }；});myapp。控制器(' names filtercontroller '，function($ scope){ $ scope。name=[{name: ' Jani '，country:'Norway'}，{name: '和歌，country: '瑞典}，{姓名：'Kai '，国家： '丹麦' }];});/脚本/正文/html

二、AngularJs的控制器使用过滤器

！DOCTYPE html html lang=' zh _ CN ' head meta charset=' UTF-8 ' title angular基础/title/head body div ng-app=' myApp ' div ng-controller=' first ctrl ' { uFirstName } } br/{ { cPrice } } br///div/div脚本src=' http : angular。量滴js /脚本类型=' application/JavaScript ' var myApp=angular。模块(' myApp '，[])；myApp.controller('firstCtrl '，函数($scope，$ filter){ $ scope。名字='张三'；$scope.uFirstName=$filter('大写)($ scope。名字)；$ scope.price=' 121212$ scope。CP rice=$ filter(' currency ')($ scope。价格，'人民币'；})/脚本/正文/html三、AngularJs自定义过滤器过滤器

！DOCTYPE html html lang=' zh _ CN ' head meta charset=' UTF-8 ' title angular基础/title/head body div ng-app=' myApp ' div ng-controller=' first ctrl ' {欢迎|替换hello } } br/{ {欢迎|替换hello 33603:5 } } br/{ {欢迎| rJs } } br//div/div脚本src=' http : angular。量滴js /脚本脚本src=' http :筛选器。js /脚本类型=' application/JavaScript ' var myApp=angular module .myApp.controller('firstCtrl '，函数($ scope){ $ scope。欢迎=' Hello AngularJs});//自定义过滤器myApp.filter('replaceHello '，function(){ return function(输入，n1，N2){ console。日志(输入)；控制台。log(n1)；控制台。原木(N2)；返回输入。替换(/Hello/，'您好');} })/script/body/html var appFilter=angular。模块(' myapp。filter '，[])；//自定义过滤器appFilter.filter('rJs '，function(){ return function(input，n1，N2){ console。日志(输入)；控制台。log(n1)；控制台。原木(N2)；返回input.replace(/Js/，' JAVAScript ')；} });

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。