avalon的过滤器的使用

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