Showing how to set up a Pipe that takes multiple updating inputs for multiple Component sources.

import {Component, View, NgFor, FORM_DIRECTIVES} from 'angular2/angular2';
import {TodoService} from './todoService';
import {TodoItemRender} from './todoItemRender';
import {StartsWith} from './startsWith';
import {SimpleSearch} from './simpleSearch';
import {LetterSelect} from './letterSelect';
import {TodoSearch} from './todoSearch'; @Component({
selector: 'todo-list'
})
@View({
pipes: [StartsWith, SimpleSearch],
directives: [NgFor, TodoItemRender, FORM_DIRECTIVES, LetterSelect, TodoSearch],
template: `
<div>
<todo-search #todo-search></todo-search>
{{todoSearch.term}}
<todo-item-render
*ng-for="#todo of todoService.todos
| simpleSearch: ['title','action'] : todoSearch.term"
[todoinput]="todo"
>
</todo-item-render>
</div>
`
}) export class TodoList{
constructor(
public todoService:TodoService
){ }
}
import {Pipe} from 'angular2/angular2';

@Pipe({
name: 'simpleSearch',
pure: false
}) export class SimpleSearch{ transform(value, [fields, letter]:[string[], string]){ return value.filter((item)=>
fields.some((field)=>
item[field].includes(letter)
));
}
}

[Angular 2] Pipes with Multiple Parameters的更多相关文章

  1. Can't bind multiple parameters ('header' and 'parameters') to the request's content.

    2019-01-23 15:46:29.012+08:00 ERROR [6]: System.InvalidOperationException: Can't bind multiple param ...

  2. JNI: Passing multiple parameters in the function signature for GetMethodID

    http://stackoverflow.com/questions/7940484/jni-passing-multiple-parameters-in-the-function-signature ...

  3. [Angular Tutorial] 9 -Routing & Multiple Views

    在这一步中,您将学到如何创建一个布局模板,并且学习怎样使用一个叫做ngRoute的Angular模块来构建一个具有多重视图的应用. ·当您现在访问/index.html,您将被重定向到/index.h ...

  4. WPF – pass multiple parameters to a Command

    public class SendCommand : ICommand { public void Execute(object parameter) { var labels = ((object[ ...

  5. [Angular 2] Select From Multiple Nested Angular 2 Elements

    You have complete control over the elements you nest inside of your component instance by using sele ...

  6. EXEC sp_executesql with multiple parameters

    传递多个参数 https://stackoverflow.com/questions/28481189/exec-sp-executesql-with-multiple-parameters http ...

  7. How to pass multiple parameters in PowerShell invoke-restmethod

    Link: http://www.tagwith.com/question_322855_how-to-pass-parameters-in-powershell-invoke-restmethod- ...

  8. MyBatis3-传递多个参数(Multiple Parameters)

    传递多个参数一般用在查询上,比如多个条件组成的查询,有以下方式去实现: 版本信息: MyBatis:3.4.4 1.自带方法 <select id="getUserArticlesBy ...

  9. Device trees, Overlays and Parameters of Raspberry Pi

    Raspberry Pi's latest kernels and firmware, including Raspbian and NOOBS releases, now by default us ...

随机推荐

  1. WebDriverWait自定义等待事件

    1. webDriverWait自定义WebElement类事件 public WebElement waitForElementVisible(WebDriver driver,final By l ...

  2. css清除浮动方法大全

    清除浮动这个问题,做前端的应该再熟悉不过了,也是每一个web前台设计师 必须掌握的机能. 为什么浮动这么难? 因为浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width ...

  3. Skinned Mesh原理解析和一个最简单的实现示例

    Skinned Mesh 原理解析和一个最简单的实现示例   作者:n5 Email: happyfirecn##yahoo.com.cn Blog: http://blog.csdn.net/n5 ...

  4. js的引用顺序

    注意:Bootstrap中的JS插件依赖于JQuery,因此JQuery要在Bootstrap之前引用!!! 把JS文件引用放入body的最下面,是为了使js在网页全部加载完后才起作用,比如你的js里 ...

  5. Node.js教程

    Node.js是什么? Node.js是建立在谷歌Chrome的JavaScript引擎(V8引擎)的服务器端平台.Node.js是由瑞恩·达尔在2009年开发的,它的最新版本是v0.10.36. N ...

  6. Struts2拦截器总结<转>

    由于项目中在登录跳转到其他应用程序模块的时候有用到拦截器,因此查看了一下相关资料. 原文地址:http://blog.csdn.net/sendfeng/article/details/4248120 ...

  7. Caption,Text,WindowText的区别——TControl也有FText,是为了模拟一个窗口

    TControl = class(TComponent) // 控件的Windows功能从TControl开始 property Caption: TCaption read GetText writ ...

  8. Record Locks

    Record Locks 记录锁: 记录锁是一个锁在一个Index记录上,比如 SELECT c1 FOR UPDATE FROM t WHERE c1 = 10; 阻止任何其他事务inserting ...

  9. c# 绘图常用对象和方法

    //BitMap 位图,常用的方法,     Save:主要方式有:(1)保存在图像文件里,可以指定格式[gif,bmp]:(2) 保存在流中,以指定格式[gif,bmp]         //gra ...

  10. 解决VS2010中产生的ipch文件夹和sdf文件

    纯粹参考他人博文,转载时注明参考链接!!! 参考链接: http://blog.sina.com.cn/s/blog_707a4cbf0100r5jq.html 在VS2010开发的项目中,ipch文 ...