宝哥软件园

详细解释AngularJS过滤器的用法

编辑:宝哥软件园 来源:互联网 时间:2021-09-19

AngularJS的过滤器,中文名字叫“filter”,用来过滤变量的值,或者打印格式,得到想要的结果或者格式。

过滤器简介

过滤器用于格式化数据。

Filter的基本原型(“|”类似于Linux中的管道模式):

{{ expression | filter }}Filter可以链式使用(即连续使用多个筛选器):

{ {表达式| filter1 | filter2 |.}}过滤器还可以指定多个参数:

{ { expression | filter : argument 1: argument 23360.}} I .在视图模板中使用它。

对表达式应用筛选器。

应遵循的格式如下:

{{ expression | filter }}表示{{expression | filter}}。

例如,{{ 12 | currency }}输出为$12.00。

对输出结果应用过滤器。

通俗地说,就是Filters的叠加——上一个filter的输出作为下一个filter的输入数据源。

应遵循的格式如下:

{ {表达式| filter1 | filter2 |.}}表示表达式由filter1过滤,然后由filter2过滤。

带参数的过滤器。

过滤器后面可以跟一个或多个参数,用于帮助实现过滤器的特殊要求和要求。

应遵循的格式如下:

{ { expression | filter : argument 1: argument 2:}}

示例:{{ 1234 | number:2 }}=1,234.00。

第二,使用AngluarJS内置的Filter。

AngularJS为我们提供了9个内置过滤器。

它们是货币、日期、过滤器、JSON、限制、大写、小写、数字、orderBy。

AngularJS文档中详细描述了“”的用法。这里只是一些常用的。

货币过滤器(货币过滤器)。

货币用于将变量转换为货币表示。

例如:{{金额|货币}}

大写/小写过滤器(字母大小写过滤器)。

例如:

{{ '小写字符串' |大写' }输入ng-model=' user input ' upper carsed : { { user input |大写}}

日期过滤器(日期过滤器)

例如:

{{ 1304375948024 |日期}}{{ 1304375948024 |日期: ' MM/DD/yyyy @ h :ma ' } }

json过滤器

例如:

{{ {foo: 'bar ',baz: 23} | json }}

在控制器、服务和驱动程序中使用过滤器。

您可以在AngularJS的控制器、服务或驱动程序中使用过滤器。此时,您需要将依赖过滤器名称添加到控制器、服务或目标的依赖项中。

直接在控制器中使用过滤器,这样控制器就可以根据自己的需要调用过滤器。

第三,定制过滤器。

AngularJS编写自定义过滤器的形式与AngularJS的工厂服务非常相似。请记住,它可以返回对象或函数。编写时,您只需要一个具有多个参数的函数。

格式大致如下:

App.filter('filter name ',function(){ return function(要筛选的对象,筛选器参数1,筛选器参数2,){ //.对象经过业务逻辑代码返回处理;}});

更多资讯
游戏推荐
更多+