Comments (2)
看api上是有说明,可以加多个过滤器,不过没看到自定义过滤器的示例。能否提供一个?
from avalon.
相关文档正在写
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格式的字符串进行转义,把尖括号转换为&gt; &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;">
<div>{{ prop | filter1 | filter2 | filter3(args, args2) | filter4(args)}}</div>
</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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from avalon.