为啥AngularJS货币过滤器格式负数用括号

Posted 2023-04-23

先来看看这些内置过滤器使用方法:一个过滤器，不带参数的情况expression|filter一个过滤器，带参数的情况expression|filter:arguments一个过滤器，带多个参数的情况expression|filter:arg1:arg2:多个过滤器，不带参数的情况expression|filter1|filter2|下面我们分别使用以下AngularJS的内置过滤器currencycurrency允许我们设置自己的货币符号，默认情况下会采用客户端所处区域的货币符号。可以这样使用：3600|currency:"$￥"返回结果为$￥123.00onlinecode点击预览numbernumber过滤器将数字格式化成文本，它的参数是可选的，用来控制小数点后的截取位数如果传入的是一个非数字字符，会返回空字符串可以这样使用：3600|number:2返回结果为：3,600.00onlinecode点击预览lowercaselowercase将字符串转换为小写可以这样使用："HEllo"|lowercase返回结果为：helloonlinecode点击预览uppercaseuppercase将字符串转换为大写可以这样使用："HEllo"|uppercase返回结果为：HELLOonlinecode点击预览jsonjson过滤器可以将一个JSON或者javascript对象转换成字符串。这个过滤器对调试相当有用可以这样使用："name":"dreamapple","language":"AngularJS"|json返回结果为："name":"dreamapple","language":"AngularJS"onlinecode点击预览datedate过滤器将日期过滤成你想要的格式，这个实在是很好的过滤器。这个过滤器用法很多我这里列举几种常用的today|date:"yyyy-mm-dd"结果为：2015-15-13today|date:"yyyy-mm-ddHH:mm::ss"结果为：2015-18-1320:18::38[onlinecode](2015-18-1320:18::38)还有三个内置的过滤器，但是使用稍微复杂一点，放在下一篇文章中我们大家一起探讨吧 参考技术A AngularJS的filter，中文名“过滤器”是用来过滤变量的值，或者格式化输出，得到自己所期望的结果或格式的东东。
工具/原料
AngularJS 脚本库
IDE
一、在视图模板（View Template）中使用
在表达式中应用Filters （过滤器）

需要遵循格式如下：
expression | filter 即 表达式 | 过滤器
例如： 12 | currency 输出为 $12.00

在输出结果中应用Filters （过滤器）

通俗点讲就是Filter的叠加--前一filter的输出结果作为后一filter的输入数据源.

需要遵循格式如下：
expression | filter1 | filter2 | ... 即 表达式(expression)使用filter1过滤后再使用filter2过滤...

带参数的Filter

Filter后面可以跟一个或多个参数，用来帮助实现特殊要求、需求的filter.

需要遵循格式如下：
expression | filter:argument1:argument2:...

示例： 1234 | number:2 = 1,234.00

END
二、使用 AngluarJS 内置Filter
AngularJS为我们提供了9个内建的过滤器

分别是currency, date, filter, json, limitTo, uppercase， lowercase, number, orderBy。

具体的用法在AngularJS的文档中都有详细说明。下面只说几个常用的。
currency filter（货币过滤器)

currency – 用来将变量转换成货币表现形式

如： amount | currency

uppercase/lowercase filter（字母大小写filter）

如：
"lower cap string" | uppercase
<input ng-model="userInput"> Uppercased: userInput | uppercase

date filter (日期filter)

如：

1304375948024 | date
1304375948024 | date:"MM/dd/yyyy @ h:mma"

json filter

如：
foo: "bar", baz: 23 | json

END
在controllers， services和drictives中使用filter
1
可以在AngularJS的controller, service或者driective中使用filter, 这时候你需要将依赖的filter名字加入到controller, service或者directive的依赖中去。
2
在controller中直接使用filter， 这样controller可以根据自身需要而适时调用filter

END
三、自定义filter（过滤器）
AngularJS编写自定义过滤器的形式和AngularJS的factory service非常相像，一定记得它返回一个对象或者是一个函数即可，编写的时候，只需要一个带有一个以上参数的函数即可。
格式大致如：
app.filter('filter(过滤器)名称',function()
return function(需要过滤的对象,过滤器参数1,过滤器参数2,...)
//...执行业务逻辑代码

return 处理后的对象;

);

angularjs

AngularJS过滤器

 

 

过滤器可以使用一个管道符(|)添加到表达式和指令中。
　　　　　　AngularJS过滤器可用于转换数据：
　　　　　　　　　　currency　　　　 格式化数字为货币格式
　　　　　　　　　　filter 　　　　　　从数组中选着应子集。
　　　　　　　　　　lowercase 　　　  格式化字符串为小写。
　　　　　　　　　　orderBy 　　　　 根据某个表达式排列数组
　　　　　　　　　　uppercase 　　　 格式化字符串为大写。

表达式中添加过滤器
　　　　过滤器可以通过一个管道字符(|) 和一个过滤器添加到表达式中。
　　　　　　uppercase过滤器将字符串格式化为大写。
　　　　　　　　　　实例：
　　　　　　　　　　　　<div ng-app="myApp" ng-controller="personCtrl">
　　　　　　　　　　　　　　　　<p>姓名{{lastName | uppercase}}</p>
　　　　　　　　　　　　</div>
　　　　　　lowercase 过滤器将字符串格式化为小写
　　　　　　　　　　　　<div ng-app="myApp" ng-controller="personCtrl">
　　　　　　　　　　　　　　　　<p>姓名为{{lastName | lowercase}}</p>
　　　　　　　　　　　　</div>

currency 过滤器
　　　　　　currency 过滤器将数字格式化为货币格式：
　　　　　　　　　　实例：
　　　　　　　　　　　　　　<div ng-app="myApp" ng-controller="costCtrl">
　　　　　　　　　　　　　　　　<input type="number" ng-model="quantity">
　　　　　　　　　　　　　　　　<input type="number" ng-model="price">
　　　　　　　　　　　　　　　　<p>总价={{(quantity * price) | currency}}</p>
　　　　　　　　　　　　　　</div>

向指令添加过滤器
　　　　　　过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中
　　　　　　　　　　orderBy 过滤器根据表达式排列数组：
　　　　　　　　　　　　　　实例：
　　　　　　　　　　　　　　　　　　<div ng-app="myApp" ng-controller="namesCtrl">
　　　　　　　　　　　　　　　　　　　　　　<ul>
　　　　　　　　　　　　　　　　　　　　　　　　　　<li ng-repeat="x in name | orderBy:\'country\'">
　　　　　　　　　　　　　　　　　　　　　　　　　　　　{{x.name +\',\'+ x.country}}
　　　　　　　　　　　　　　　　　　　　　　　　　　</li>
　　　　　　　　　　　　　　　　　　　　　　</ul>
　　　　　　　　　　　　　　　　　　</div>

过滤输入
　　　　　　输入过滤器可以通过一个管道符(|)和一个过滤器添加到指令中，该过滤器后跟一个冒号和模型名称。
　　　　　　　　　　filter过滤器从数组中选着一个子集：
　　　　　　　　　　　　实例
　　　　　　　　　　　　　　<div ng-app="myApp" ng-controller="namesCtrl">
　　　　　　　　　　　　　　　　　　<p><input type="text" ng-model="test"></p>
　　　　　　　　　　　　　　　　　　<ul>
　　　　　　　　　　　　　　　　　　　　<li ng-repeat="x in names | filter:test | orderBy:\'countery\'">
　　　　　　　　　　　　　　　　　　　　　　{{(x.name | uppercase) +\',\'+x.counry}}
　　　　　　　　　　　　　　　　　　　　</li>
　　　　　　　　　　　　　　　　　　</ul>
　　　　　　　　　　　　　　</div>