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 ...
随机推荐
-
android:shape
android:shape=["rectangle" | "oval" | "line" | "ring"] shape ...
-
Erlang 程序引发共享内存 bug 的一个例子
虽然 Erlang 的广告说得非常好,functional.share-nothing.消息传递,blah blah 的,好像用 Erlang 写并发程序就高枕无忧了,但是由于 Erlang 信奉高度 ...
-
如何生成RestFul Api文档
Web API文档工具列表Swagger ——Swagger框架可以通过代码生成漂亮的在线API,甚至可以提供运行示例.支持Scala.Java.Javascript.Ruby.PHP甚至 Actio ...
-
[iOS微博项目 - 1.5] - NavigationBar标题按钮
A.NavigationBar标题按钮 1.需求 在“首页”的导航栏中部设置一个“首页”文字+箭头按钮 统一设置样式 根据实际文本长度调整宽度 消除系统自带的点击高亮效果 点击按钮,箭头上下颠倒 gi ...
-
如何用代码开启“个人热点”功能?如何用代码把iOS设备设置成一个无线路由?
不好意思,你办不到.苹果不允许.因为你没有权限.
-
如何调用EcStore中的API接口
EcStore系统已内置了丰富的API接口供外部系统调用(接口列表见文章最下面),外部系统具体如何调用这些API呢? 例如有一个PHP的论坛需要调用ecstore系统内一个商品的详情,则可以使用b2c ...
-
ZigBee研究之旅(二)
在学习ZigBee设备CC2530模块时,编程后程序无法运行,但又十分确定程序的真确性的情况下,看看是不是project栏下的option选项配置的有问题,我是经常在这里出问题,一开始找不到原因,特此 ...
-
C#+Mapxtreme 实现一些GIS系统基本的功能
此程序包括了mapxtreme地图相关基本功能的演示其中包括 鹰眼地图,图层控制,发达,缩小,平移地图,地图模糊查询,中点工具,距离测量工具,面积测量工具,图元信息查看工具.适合于企业级开发,可以为您 ...
-
Labeling Balls(变种拓扑)
Labeling Balls Time Limit : 2000/1000ms (Java/Other) Memory Limit : 131072/65536K (Java/Other) Tot ...
-
hdu1034
#include<stdio.h>const int MAXN=1000;int a[MAXN];int main(){ int n; int i; while(scanf("% ...