[Angular 2] Using Pipes to Filter Data

时间:2022-09-17 09:36:53

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的更多相关文章

  1. 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 ...

  2. php&colon;&sol;&sol;input&comma;php&colon;&sol;&sol;filter&comma;data URI schema的那些事

    一.php://input一句话木马 在调研dedecms的历史漏洞时,发现了dedecms安装文件曾经出过被植入后门的漏洞(SSV-ID站点include目录下shopcar.class.php文件 ...

  3. &lbrack;Postgres&rsqb; 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 ...

  4. angular学习(六)-- Filter

    2.6 过滤器:Filter 内置过滤器 currency number date json uppercase lowercase orderBy limitTo filter 自定义过滤器

  5. &lbrack;GraphQL&rsqb; 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 ...

  6. magento 自定义url路径 和 filter data 小结

    背景是往一个第三方的搜索插件里面加入filter功能. 首先是路径,插件自己定义了一个router,类似于cms.那首先说说router好了,从入口一路追查的话,会发现最后进入的是Mage_Core_ ...

  7. Angular - - filter 过滤器

    Filter Ng里的过滤器. currency:把一个数字格式化成货币模式(如$1,234.56).当没有提供任何货币符号时,默认使用当前区域的符号. 使用: HTML:{{ currency_ex ...

  8. angular的filter

    angular的filter filter两种用法 1.在模板中使用filter {{expression|filter}}//基本用法 {{expression|filter1|filter2|fi ...

  9. Jasper&lowbar;filter data&lowbar;pass field data from main to sub to filter some data

    main report: 1 add variable <variable name="Variable_rule" class="java.lang.String ...

随机推荐

  1. android&colon;shape

    android:shape=["rectangle" | "oval" | "line" | "ring"] shape ...

  2. Erlang 程序引发共享内存 bug 的一个例子

    虽然 Erlang 的广告说得非常好,functional.share-nothing.消息传递,blah blah 的,好像用 Erlang 写并发程序就高枕无忧了,但是由于 Erlang 信奉高度 ...

  3. 如何生成RestFul Api文档

    Web API文档工具列表Swagger ——Swagger框架可以通过代码生成漂亮的在线API,甚至可以提供运行示例.支持Scala.Java.Javascript.Ruby.PHP甚至 Actio ...

  4. &lbrack;iOS微博项目 - 1&period;5&rsqb; - NavigationBar标题按钮

    A.NavigationBar标题按钮 1.需求 在“首页”的导航栏中部设置一个“首页”文字+箭头按钮 统一设置样式 根据实际文本长度调整宽度 消除系统自带的点击高亮效果 点击按钮,箭头上下颠倒 gi ...

  5. 如何用代码开启&OpenCurlyDoubleQuote;个人热点”功能?如何用代码把iOS设备设置成一个无线路由?

    不好意思,你办不到.苹果不允许.因为你没有权限.

  6. 如何调用EcStore中的API接口

    EcStore系统已内置了丰富的API接口供外部系统调用(接口列表见文章最下面),外部系统具体如何调用这些API呢? 例如有一个PHP的论坛需要调用ecstore系统内一个商品的详情,则可以使用b2c ...

  7. ZigBee研究之旅(二)

    在学习ZigBee设备CC2530模块时,编程后程序无法运行,但又十分确定程序的真确性的情况下,看看是不是project栏下的option选项配置的有问题,我是经常在这里出问题,一开始找不到原因,特此 ...

  8. C&num;&plus;Mapxtreme 实现一些GIS系统基本的功能

    此程序包括了mapxtreme地图相关基本功能的演示其中包括 鹰眼地图,图层控制,发达,缩小,平移地图,地图模糊查询,中点工具,距离测量工具,面积测量工具,图元信息查看工具.适合于企业级开发,可以为您 ...

  9. Labeling Balls&lpar;变种拓扑&rpar;

    Labeling Balls Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 131072/65536K (Java/Other) Tot ...

  10. hdu1034

    #include<stdio.h>const int MAXN=1000;int a[MAXN];int main(){ int n; int i; while(scanf("% ...