uppercase 将字符串全部大写
vm.aaa = "aaa"
<div>{{@aaa | uppercase}}</div>
lowercase 将字符串全部小写
vm.aaa = "AAA"
<div>{{@aaa |
lowercase}}
</div>
truncate 对长字符串进行截短,有两个可选参数 , number,最后返回的字符串的长度,已经将truncation的长度包含在内,默认为30。 truncation,
告知用户它已经被截短的一个结尾标识,默认为"..."
vm.aaa = "121323234324324"
<div>{{@aaa | truncate(10,'...')}}</div>
camelize 驼峰化处理, 如"aaa-bbb"变成"aaaBBB"
escape 对类似于HTML格式的字符串进行转义,如将<、 >转换为<、 >
sanitize 对用户输入的字符串进行反XSS处理,去掉onclick, javascript:alert
,<script>
等危险属性与标签。
number 对需要处理的数字的整数部分插入千分号(每三个数字插入一个逗号),有一个参数fractionSize,用于保留小数点的后几位。
fractionSize:小数部分的精度,默认为3。
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="avalon.js"></script>
<script>
avalon.define({
$id: "number",
aaa: 1234.56789
})
</script>
</head>
<body>
<div ms-controller="number">
<p>输入数字:
<input ms-duplex="@aaa">
</p>
<p>不处理:{{@aaa}}</p>
<p>不传参:{{@aaa|number}}</p>
<p>不保留小数:{{@aaa|number(0)}}</p>
<p>负数:{{-@aaa|number(4)}}</p>
</div>
</body>
</html>
currency 用于格式化货币,类似于number过滤器(即插入千分号),但前面加了一个货币符号,默认使用人民币符号\uFFE5
symbol, 货币符号,默认是\uFFE5
fractionSize,小数点后保留多少数,默认是2
date 对日期进行格式化,date(formats), 目标可能是符合一定格式的字符串,数值,或Date对象。
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="avalon.js"></script>
<script>
avalon.define({
$id: 'testtest',
name: "大跃进右",
d1: new Date,
d2: "2011/07/08",
d3: "2011-07-08",
d4: "01-01-2000",
d5: "03 04,2000",
d6: "3 4,2000",
d7: 1373021259229,
d8: "1373021259229",
d9: "2014-12-07T22:50:58+08:00",
d10: "\/Date(1373021259229)\/"
})
</script>
</head>
<body>
<div ms-controller="testtest">
<p>生成于{{ @d1 | date("yyyy MM dd:HH:mm:ss")}}</p>
<p>生成于{{ @d2 | date("yyyy MM dd:HH:mm:ss")}}</p>
<p>生成于{{ @d3 | date("yyyy MM dd:HH:mm:ss")}}</p>
<p>生成于{{ @d4 | date("yyyy MM dd:HH:mm:ss")}}</p>
<p>生成于{{ @d5 | date("yyyy MM dd:HH:mm:ss")}}</p>
<p>生成于{{ @d6 | date("yyyy MM dd")}}</p>
<p>生成于{{ @d7 | date("yyyy MM dd:HH:mm:ss")}}</p>
<p>生成于{{ @d8 | date("yyyy MM dd:HH:mm:ss")}}</p>
<p>生成于{{ @d9 | date("yyyy MM dd:HH:mm:ss")}} //这是ISO8601的日期格式</p>
<p>生成于{{ @d10| date("yyyy MM dd:HH:mm:ss")}} //这是ASP.NET输出的JSON数据的日期格式</p>
</div>
</body>
</html>
循环过滤器
用于ms-for指令中
limitBy 只能用于ms-for循环,对数组与对象都有效, 限制输出到页面的个数, 有两个参数
limit: 最大个数,必须是数字或字符, 当个数超出数组长或键值对总数时, 等于后面
begin: 开始循环的个数, 可选,默认0
<!DOCTYPE html> <html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <script src="avalon.js"></script> <script> avalon.define({ $id: "limitBy", array: [1, 2, 3, 4, 5, 6], object: { a: 1, b: 2, c: 3, d: 4, e: 5 }, num: 3 }) </script> </head> <body> <div ms-controller='limitBy'> <select ms-duplex-number='@num'> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <ul> <li ms-for='el in @array | limitBy(@num)'>{{el}}</li> </ul> <ul> <li ms-for='el in @object | limitBy(@num)'>{{el}}</li> </ul> </div> </body> </html>
页面显示如下:
太多的过滤器使用,参考http://www.itprobie.com/jc/avalon/avalon_html/filter.html