Ionic2学习笔记(3):Pipe
作者:Grey
原文地址: http://www.cnblogs.com/greyzeng/p/5538630.html
Pipe类似过滤器,比如,在一个字符串要展现在页面之前,
我们需要对这个字符串进行一些操作,比如:将字符串转化为大写,加一个前缀/后缀……
Pipe的作用就是来实现类似的需求:
模型如下:
假设一个字符串: "hello", 我们在展示这个字符串的时候,需要先转换为大写,
然后加一个后缀 " WORLD", 最后字符串展示的效果是HELLO WORLD
因为需求比较简单,我们可以用一个Pipe来实现转大写和增加后缀的功能,
- 进入项目:cd MyFirstApp
- 新建一个名字为NewPipe的Pipe,
命令:ionic g pipe NewPipe
项目目录会多出一个文件夹:
- 打开NewPipe.ts, 修改其中的transform方法
- 在../app/home/home.ts中引入这个Pipe
- 在../app/home/home.html中增加字符串显示:
在../app/home/home.ts中,设置字符串的值:
- 注入Pipe
在../app/home/home.html中,
注意,这里的newPipe是这个名字:
- 运行,ionic serve -l
参考:
http://www.joshmorony.com/how-to-use-pipes-to-manipulate-data-in-ionic-2/
http://mcgivery.com/understanding-ionic-2-pipe/
------
上一篇:Ionic2学习笔记(2):自定义Component
下一篇:Ionic2学习笔记(4):*号
Ionic2学习笔记(3):Pipe的更多相关文章
- Ionic2学习笔记(4):*号
作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5544479.html 大家常常会在ionic2页面中见到*号 ...
- Ionic2学习笔记(2):自定义Component
作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5536298.html 上一篇提到,Ionic2提供了很多Co ...
- Ionic2学习笔记(10):扫描二维码
作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5575843.html 时间:6/11/2016 说明: 在本文发表的时候(2016-06-1 ...
- Ionic2学习笔记(9):访问本地设备
作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5559927.html Ionic2提供了访问本地设备的方法,但是需要安装 ...
- Ionic2学习笔记(8):Local Storage& SQLite
作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5557947.html Ionic2可以有两种方式来存储数据,Local S ...
- Ionic2学习笔记(7):Input
作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5554610.html 我们先来看一个简单的输入用户名和密码点击登录的界面: ...
- Ionic2学习笔记(6):Navigation
作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5551535.html Ionic2中创建一个页面很方便,在页面之间相互切换也很方 ...
- Ionic2学习笔记(5):Provider
作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5547646.html Provider是一种为App提供数据源的方式, 举个 ...
- Ionic2学习笔记(0):HelloWorld
作者:Grey 原文地址:http://www.cnblogs.com/greyzeng/p/5529153.html 操作系统: Windows 10 环境配置: Node.js Java SE D ...
随机推荐
- apache httpclient cache 实现可缓存的http客户端
这里的cache storage 采用ehcache,而不是默认的内存式的cache storage.采用ehcache可以将内容缓存到磁盘上. maven <dependency> &l ...
- Ubuntu iptables配置
sudo su sudo apt-get install iptables-persistent modprobe ip_tables #启动iptable #删除原有iptables规则 ipt ...
- AlwaysOn 同步时间的测试
背景 <SQL Server 2012实施与管理实战指南>中指AlwaysON同步过程如下: 任何一个SQL Server里都有个叫Log Writer的线程,当任何一个SQL用户提交一个 ...
- C#中的线程四(System.Threading.Thread)
C#中的线程四(System.Threading.Thread) 1.最简单的多线程调用 System.Threading.Thread类构造方法接受一个ThreadStart委托,改委托不带参数,无 ...
- 上网调查一下目前流行的源程序版本管理软件和项目管理软件都有哪些?各有什么优缺点?并在Github注册账户,写一篇博客记录注册的过程。
问题一:上网调查一下目前流行的源程序版本管理软件和项目管理软件都有哪些?各有什么优缺点?(以下内容为网上查询所得) Microsoft TFS(Team Foundation Server): 优点: ...
- Html5 舞动的雨伞
HMTL5的学习断断续续,方法不用又生疏了,昨天做的一个雨伞的Demo,先看看效果 主要是运用了中心点变换和旋转两个方法.不同的动画用定时器控制, 下面是全部代码: <canvas id=&qu ...
- 认识SQLServer索引以及单列索引和多列索引的不同
一.索引的概念 索引的用途:我们对数据查询及处理速度已成为衡量应用系统成败的标准,而采用索引来加快数据处理速度通常是最普遍采用的优化方法. 索引是什么:数据库中的索引类似于一本书的目录,在一本书中使 ...
- [蓝牙] 5、Battery Service module
Detailed Description This module implements the Battery Service with the Battery Level characteristi ...
- 切换到ZSH以后遇到的坑
了解到ZSH的强大以后打算将自己目前使用的bash切换到ZSH.具体ZSH比bash强在那里就不多少了,网上的文章一搜一大把.个人主要是被ZSH强大的自动补全吸引过来的.虽然bash装了bash-co ...
- Azure China (4) 管理Azure China Storage Account
<Windows Azure Platform 系列文章目录> Update 2015-05-10 强烈建议使用AzCopy工具,AzCopy命令行工具,是经过优化的.高性能Azure S ...