[Angular 2] Using Pipes to Filter Data
Pipes allow you to change data inside of templates without having to worry about changing it in the Controller. Creating a custom Pipe is as simple as giving it a name and a transform function that output what you expect.
startsWith.ts:
import {Pipe} from 'angular2/angular2'; @Pipe({
name: 'startsWith'
}) export class StartsWith{ transform(value, [field, letter]){ // 1: value passed in, 2: array
return value.filter((item) => {
return item[field].startsWith(letter);
})
}
}
todoList:
/**
* Created by wanzhen on 23.10.2015.
*/
import {Component, View, NgFor} from 'angular2/angular2';
import {TodoService} from './todoService';
import {TodoItemRender} from './todoItemRender';
import {StartsWith} from './startsWith'; @Component({
selector: 'todo-list'
})
@View({
pipes: [StartsWith],
directives: [NgFor, TodoItemRender],
template: `
<div>
<todo-item-render
*ng-for="#todo of todoService.todos | startsWith:'title':'e'" // title is the prop of #todo, filter get only start letter with 'e'
[todoinput]="todo"
>
</todo-item-render>
</div>
`
}) export class TodoList{
constructor(
public todoService:TodoService
){ }
}
[Angular 2] Using Pipes to Filter Data的更多相关文章
- kibi - join and filter data from multiple Elasticsearch indexes
Kibi extends Kibana 4.6.4 with data intelligence features. The core feature of Kibi is the capabilit ...
- php://input,php://filter,data URI schema的那些事
一.php://input一句话木马 在调研dedecms的历史漏洞时,发现了dedecms安装文件曾经出过被植入后门的漏洞(SSV-ID站点include目录下shopcar.class.php文件 ...
- [Postgres] Filter Data in a Postgres Table with Query Statements
We have all this data, but how do we answer questions about it? In this lesson we’ll learn how to fi ...
- angular学习(六)-- Filter
2.6 过滤器:Filter 内置过滤器 currency number date json uppercase lowercase orderBy limitTo filter 自定义过滤器
- [GraphQL] Filter Data Based on Query Arguments with GraphQL
With GraphQL, every field and nested object can have a set of arguments which can be used to request ...
- magento 自定义url路径 和 filter data 小结
背景是往一个第三方的搜索插件里面加入filter功能. 首先是路径,插件自己定义了一个router,类似于cms.那首先说说router好了,从入口一路追查的话,会发现最后进入的是Mage_Core_ ...
- Angular - - filter 过滤器
Filter Ng里的过滤器. currency:把一个数字格式化成货币模式(如$1,234.56).当没有提供任何货币符号时,默认使用当前区域的符号. 使用: HTML:{{ currency_ex ...
- angular的filter
angular的filter filter两种用法 1.在模板中使用filter {{expression|filter}}//基本用法 {{expression|filter1|filter2|fi ...
- Jasper_filter data_pass field data from main to sub to filter some data
main report: 1 add variable <variable name="Variable_rule" class="java.lang.String ...
随机推荐
- 拓扑排序-DFS
拓扑排序的DFS算法 输入:一个有向图 输出:顶点的拓扑序列 具体流程: (1) 调用DFS算法计算每一个顶点v的遍历完成时间f[v] (2) 当一个顶点完成遍历时,将该顶点放到一个链表的最前面 (3 ...
- 高德地图关键字搜索删除上一次搜索的Marker
方法:Marker类的 setMap(null);方法 高德是通过循环调用addmarker(i,d)方法 创建marker标记,所以我们需要 把创建的marker标记压入到一个数组,再第二次搜索 ...
- 微博输入相关js 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Java笔记原生数据类型【二】
1.Java中的数据类型分为: 1)原生类型(primitive Data type) 2.)引用类型(对象类型) (Reference Type) 1.变量和常量: 常量: 就是值不会变化的量: 变 ...
- Python--模块微谈
一个.py文件是一个模块,模块里面可以定义很多函数,载入模块就可以使用函数.模块又有python内置模块,又有第三方模块,不同模块里可以有相同的函数名和变量名,模块又可以组织到package里,不同的 ...
- Python自动化运维之23、Dom
文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.最为关心的是,DOM把网页 ...
- 请教 WINDOWSPHONE 有个人录了个传感器等硬件的视频,并且项目是完全开源的,大家有知道地址的吗?或者叫什么。
请教 WINDOWSPHONE 有个人录了个传感器等硬件的视频,并且项目是完全开源的,大家有知道地址的吗?或者叫什么.
- Multiple
poj1465:http://poj.org/problem?id=1465 题意:给你一个数n(0~4999):以及m个不同十进制的数,问有这些十进制数组成的最小的n的倍数是多少.如果有则输出,没有 ...
- Replicate String in C#
My original posting on string repetition caused a couple responses, and is currently among the Top P ...
- 安装zabbix2.2.3
系统版本:CentOS 6.3_x86_64 zabbix版本:zabbix-2.2.3 zabbix服务端IP:172.16.10.72 1.yum安装LAMP环境 # yum -y install ...