5-1. 内建
5-1-1. lowercase
<!-- examples/pipes/lowercase.html -->
<p hi-bind="name | lowercase"></p>
<p>{{name | lowercase}}</p>
5-1-2. uppercase
<!-- examples/pipes/uppercase.html -->
<p hi-bind="name | uppercase"></p>
<p>{{name | uppercase}}</p>
5-1-3. number
<!-- examples/pipes/number.html -->
<span hi-bind="income | number: '2'"></span> // => 3500.00
<span hi-bind="income | number: fixed"></span> // => 3500.000 when fixed value is 3
5-1-4. json
<!-- examples/pipes/json.html -->
<p hi-bind="user | json"></p> // => {"name": "highway", "license": "MIT"}
<p>{{user | json}}</p> // => {"name": "highway", "license": "MIT"}
5-1-5. date
<!-- examples/pipes/date.html -->
<div hi-bind="user.birthday | date: 'yyyy-MM-dd hh:mm:ss'"></div>
<div hi-bind="user.birthday | date: format"></div>
5-1-6. limit
<!-- examples/pipes/limit.html -->
<ul>
<li hi-repeat="user in users | limit: 2">id: {{user.id}}, name: {{user.name}}</li>
</ul>
<ul>
<li hi-repeat="user in users | limit: limit">id: {{user.id}}, name: {{user.name}}</li>
</ul>
5-1-7. filter
<ul>
<li hi-repeat="user in users | filter: 'id' = '001' or 'name' *= 'j'">id: {{user.id}}, name: {{user.name}}</li>
</ul>
<ul>
<li hi-repeat="user in users | filter: 'name' ^= 'a' | filter: 'name' *= 'n' ">id: {{user.id}}, name: {{user.name}}</li>
</ul>
<ul>
<li hi-repeat="user in users | filter: 'name' *= contains">id: {{user.id}}, name: {{user.name}}</li>
</ul>
5-1-7-1. 匹配符
= | 相等 |
---|---|
== | 严格相等 |
!= | 不相等 |
!== | 严格不相等 |
^= | 开始于 |
$= | 结束于 |
*= |
5-1-7-1. 连接符
or | 或者 |
---|---|
and | 不支持,通过多次filter实现 |
user in users | filter: ‘name’ ^= ‘a’ | filter: ‘name’ *= ‘n’为用户姓名以’a’开始并且(and)包含’n’的用户
5-1-8. sort
<ul>
<li hi-repeat="user in users | sort: 'name' 'asc'">id: {{user.id}}, name: {{user.name}</li>
</ul>
<ul>
<li hi-repeat="user in users | sort: sortBy ascBy">id: {{user.id}}, name: {{user.name}</li>
</ul>
5-2. 自定义
自定义管道是一个工厂函数
5-2-1. 入参
-
source:源属性,income|number:fixed中
source = {prop: ‘income’, watch: true, secure: true}
- prop:源字段
- watch:双向绑定,{{prop}}/{{{prop}}}为true,[[prop]]/[[[prop]]]为false
- secure: 安全,{{prop}}/[[prop]]为true, {{{prop}}}/[[[prop]]]为false
- exp:表达式,income|number:fixed中 exp = ‘fixed’
- pipeline:管道线,记录当前指令的所有管道实例,执行 pipeline(oriValue)获取管道执行结果值
- update:更新函数,执行 update更新执行展示
- $scope: 当前作用域
- $ctx: 上下文
5-2-2. 出参
- $mount:生命周期函数,挂载时执行
- iterator:迭代函数,接收上一个管道的结果值 value,返回处理后的值
- $unmount:生命周期函数,销毁时执行
5-2-3. 全局
使用Highway.pipe定义,需指定宏指令名和宏指令工厂函数
5-2-4. 局部
指定视图中有效,通过$pipes指定,需指定宏指令名和宏指令工厂函数
5-2-5. 实例
自定义管道,将数值转化为百分比格式,调用格式为{{prop | percentage}}, percentage为管道名
const lowercase = function () {
return {
$iterator($value) {
if ($value == null) {
return $value;
}
return ($value + '').toLowerCase();
}
}
};
export default lowercase;