首页 > 其他 > 详细

[Angular 2] Create a simple search Pipe

时间:2015-11-01 06:52:15      阅读:284      评论:0      收藏:0      [点我收藏+]

This lesson shows you how to create a component and pass its properties as it updates into a Pipe to make a simple searchable list.

 

import {Pipe} from ‘angular2/angular2‘;

@Pipe({
    name: ‘simpleSearch‘
})

export class SimpleSearch{

    transform(value, [field, letter]){
        return value.filter((item) => {
            return item[field].includes(letter);
        })
    }
}

 

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
                    | startsWith:‘title‘:letterSelect.selectedLetter)
                    | simpleSearch:‘title‘:todoSearch.term"
                    [todoinput]="todo"
                >
                </todo-item-render>
                <letter-select #letter-select></letter-select>
          </div>
    `
})

export class TodoList{
    constructor(
        public todoService:TodoService
    ){

    }
}

 

You can group something together by using (), so todoService.todos will piped by startWith, and its result will be handled by simpleSearch.

 

[Angular 2] Create a simple search Pipe

原文:http://www.cnblogs.com/Answer1215/p/4926649.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!