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. PowerDesigner 的7种建模文件

    1.  概念数据模型 (CDM) 对数据和信息进行建模,利用实体-关系图(E-R图)的形式组织数据,检验数据设计的有效性和合理性. 2.  逻辑数据模型 (LDM) PowerDesigner 15 ...

  2. jQuery慢慢啃筛选(四)

    1.eq(index|-index) 获取第N个元素 其中负数:一个整数,指示元素的位置,从集合中的最后一个元素开始倒数.(1算起) $("p").eq(1)//获取匹配的第二个元 ...

  3. Tenth Line

    How would you print just the 10th line of a file? For example, assume that file.txt has the followin ...

  4. Meta元素可视区

    一.网页手机wap2.0网页的head里加入下面这条元标签,在iPhone的浏览器中页面将以原始大小显示,并不允许缩放. <meta name="viewport" cont ...

  5. FC8下备份linux系统

    linux系统可以使用tar来备份.<br><br> 我在FC8上装好了totem, mplayer, audacious, 并搞定了wifi后,我觉得该备份一下FC8系统.& ...

  6. 汇总前端最最常用的JS代码片段

    html5选择器 //参数均接收一个合法的css选择器 element = document.querySelector('.foo,.bar');//返回带有foo或者bar样式类的首个元素 ele ...

  7. BZOJ 1020 安全的航线flight

    Description 在设计航线的时候,安全是一个很重要的问题.首先,最重要的是应采取一切措施确保飞行不会发生任何事故,但同时也需要做好最坏的打算,一旦事故发生,就要确保乘客有尽量高的生还几率.当飞 ...

  8. Ruby on Rails创始人DHH谈如何进行混合移动APP开发

    混合型APP兼具原生型APP软件良好用户交互体验的优势和网页型APP软件跨平台开发的优势,并且其开发成本和网页型APP软件接近,其开发效率也远高于原生型APP软件.混合型APP已经被众多企业所认可.最 ...

  9. h.264直接预测

    直接预测是B帧上一种独有的预测方式,其中直接预测又分为两种模式: 时域直接模式(temporal direct).空域直接模式(spatial direct). 在分析这两种模式之前,有一个前提概念需 ...

  10. 疯狂java讲义笔记 2.3.7

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&q ...