Code Monkey home page Code Monkey logo

Comments (2)

limodou avatar limodou commented on June 1, 2024

看api上是有说明,可以加多个过滤器,不过没看到自定义过滤器的示例。能否提供一个?

from avalon.

RubyLouvre avatar RubyLouvre commented on June 1, 2024

相关文档正在写

avalon从angular中抄来管道符风格的过滤器,但有点不一样。 它只能用于{{}}插值表达式。如果不存在参数,要求直接跟|filter,如果存在参传,则要用小括号括起,参数要有逗号,这与一般的函数调用差不多,如|truncate(20,"……")

    <p>avalon自带以下几个过滤器</p>
    <dl>
        <dt>html</dt>
        <dd>没有传参,用于将文本绑定转换为HTML绑定</dd>
        <dt>uppercase</dt>
        <dd>大写化</dd>
        <dt>lowercase</dt>
        <dd>小写化</dd>
        <dt>truncate</dt>
        <dd>对长字符串进行截短,truncate(number, truncation), number默认为30,truncation为“...” </dd>
        <dt>camelize</dt>
        <dd>驼峰化处理</dd>
        <dt>escape</dt>
        <dd>对类似于HTML格式的字符串进行转义,把尖括号转换为&amp;gt; &amp;lt;</dd>
        <dt>currency</dt>
        <dd>对数字添加货币符号,以及千位符, currency(symbol)</dd>
        <dt>number</dt>
        <dd>对数字进行各种格式化,这与与PHP的number_format完全兼容, number(decimals, dec_point, thousands_sep), 
            <pre>
         decimals   可选,规定多少个小数位。
         dec_point  可选,规定用作小数点的字符串(默认为 . )。
        thousands_sep   可选,规定用作千位分隔符的字符串(默认为 , ),如果设置了该参数,那么所有其他参数都是必需的。
            </pre>
        </dd>
        <dt>date</dt>
        <dd>对日期进行格式化,date(formats)
            <pre>
 'yyyy': 4 digit representation of year (e.g. AD 1 => 0001, AD 2010 => 2010)
 'yy': 2 digit representation of year, padded (00-99). (e.g. AD 2001 => 01, AD 2010 => 10)
 'y': 1 digit representation of year, e.g. (AD 1 => 1, AD 199 => 199)
 'MMMM': Month in year (January-December)
 'MMM': Month in year (Jan-Dec)
 'MM': Month in year, padded (01-12)
 'M': Month in year (1-12)
 'dd': Day in month, padded (01-31)
 'd': Day in month (1-31)
 'EEEE': Day in Week,(Sunday-Saturday)
 'EEE': Day in Week, (Sun-Sat)
 'HH': Hour in day, padded (00-23)
 'H': Hour in day (0-23)
 'hh': Hour in am/pm, padded (01-12)
 'h': Hour in am/pm, (1-12)
 'mm': Minute in hour, padded (00-59)
 'm': Minute in hour (0-59)
 'ss': Second in minute, padded (00-59)
 's': Second in minute (0-59)
 'a': am/pm marker
 'Z': 4 digit (+sign) representation of the timezone offset (-1200-+1200)
 format string can also be one of the following predefined localizable formats:

 'medium': equivalent to 'MMM d, y h:mm:ss a' for en_US locale (e.g. Sep 3, 2010 12:05:08 pm)
 'short': equivalent to 'M/d/yy h:mm a' for en_US locale (e.g. 9/3/10 12:05 pm)
 'fullDate': equivalent to 'EEEE, MMMM d,y' for en_US locale (e.g. Friday, September 3, 2010)
 'longDate': equivalent to 'MMMM d, y' for en_US locale (e.g. September 3, 2010
 'mediumDate': equivalent to 'MMM d, y' for en_US locale (e.g. Sep 3, 2010)
 'shortDate': equivalent to 'M/d/yy' for en_US locale (e.g. 9/3/10)
 'mediumTime': equivalent to 'h:mm:ss a' for en_US locale (e.g. 12:05:08 pm)
 'shortTime': equivalent to 'h:mm a' for en_US locale (e.g. 12:05 pm)
            </pre>
            <p>例子:</p>
            <div ms-skip>
                <p>生成于{{ new Date | date("yyyy MM dd:HH:mm:ss")}}</p>
                <p>生成于{{ "2011/07/08" | date("yyyy MM dd:HH:mm:ss")}}</p>
                <p>生成于{{ "2011-07-08" | date("yyyy MM dd:HH:mm:ss")}}</p>
                <p>生成于{{ "01-01-2000" | date("yyyy MM dd:HH:mm:ss")}}</p>
                <p>生成于{{ "03 04,2000" | date("yyyy MM dd:HH:mm:ss")}}</p>
                <p>生成于{{ "3 4,2000" | date("yyyy MM dd:HH:mm:ss")}}</p>
                <p>生成于{{ 1373021259229 | date("yyyy MM dd:HH:mm:ss")}}</p>
                <p>生成于{{ "1373021259229" | date("yyyy MM dd:HH:mm:ss")}}</p>
                <p>值得注意的是,new Date可传的格式类型非常多,但不是所有浏览器都支持这么多,详看<a href="http://dygraphs.com/date-formats.html">这里</a></p>
            </div>
        </dd>
    </dl>
    <p>多个过滤器一起工作</p>
    <pre class="brush:html;gutter:false;toolbar:false;">

    &lt;div&gt;{{ prop | filter1 | filter2 | filter3(args, args2) | filter4(args)}}&lt;/div&gt;
    </pre>
    <p>如果想自定义过滤器,可以这样做</p>
    <pre class="brush:js;gutter:false;toolbar:false;">
          avalon.filters.myfilter = function(str, args, args2){//str为管道符之前计算得到的结果,默认框架会帮你传入,此方法必须返回一个值
             /* 具体逻辑 */
             return ret;
          }
    </pre>

from avalon.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.