angular4学习笔记(第五章 管道篇)

1.大小写管道

<h2>大小写管道(只对字母有用)</h2>

<p>{{ 'angular的大写管道' | uppercase }}</p>
<p>{{ 'ANGULAR的小写管道' | lowercase }}</p>

2.数字管道

<h2>数字管道</h2>

<p>数值 | number:最少整数位数.最少小数位数-最多小数位数 </p>

<p>会四舍五入 </p>

<p>{{3.1415926 | number:'1.1-3'}}</p>

<p>{{3.1415926 | number:'2.1-5'}}</p>

<p>{{3.14 | number:'1.3-5'}}</p>

3.时间管道

<h2>时间管道</h2>

<p>{{time | date:'yyyy-MM-dd HH:mm:ss'}}</p>

<p>{{time | date:'yyyy/MM/dd HH:mm:ss'}}</p>

<p>{{time | date:'yyyy年M月dd日 HH:mm:ss'}}</p>

4.字符串截取管道

<h2>字符串截取管道</h2>

<p>字符串 | slice：起始位置下标：结束位置下标</p>

<p>下标由0开始</p>

<p>起始位置下标(包括当前下标值)</p>

<p>结束位置下标(不包括当前下标值)(可选，不填为截取开始位置以后所有字符)</p>

<p>参数是负数，那么它规定的是从字符串的尾部开始算起的位置</p>

<!-- 从字符串的第1个位置到第5个位置直接的字符串片段: -->
<p>{{'123456789' | slice:1:5}}</p>

<!-- 从字符串的第1个位置提取字符串片段: -->
<p>{{'123456789' | slice:1}}</p>

<!-- 从字符串的第1个位置到字符串倒数3个位置直接的字符串片段 -->
<p>{{'123456789' | slice:1:-3}}</p>

<!-- 从字符串提取倒数2个字符串片段: -->
<p>{{'123456789' | slice:-2}}</p>

5.货币管道

<h2>货币管道</h2>

<p>{{8.2515 | currency:'USD':false}}</p>

<p>{{156.548 | currency:'USD':true}}</p>

<p>{{156.548 | currency:'￥'}}</p>

<p>{{156.548 | currency:'$'}}</p>

6.管道链

<h2>管道链</h2>

<p>管道可以写多个，将会一个一个管道执行</p>

<p>{{ '36985ksenf'  | slice: 0:3 | number: '1.4-4'}}</p>

7.自定义管道

• 使用  ng g p pipename 指令创建管道
• 编写管道
• 引入管道
• 使用管道