[Angular 2] Using Pipes to Filter Data

2199 단어
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.
 
Create a Pipe: 
import {Pipe} from 'angular2/core';
@Pipe({
    name: 'search'
})

export class SearchPipe{
    transform(todos){
        return todos.filter(
            (todoModel) => {
                // Only showing the todo starts with 'e'
                return todoModel.title.startsWith('e');
            }
        )
    }
}

 
Using a pipe: 
import {Component} from 'angular2/core';
import {TodoService} from './TodoService';
import {TodoItemRenderer} from './TodoItemRenderer';
import {SearchPipe} from './search-pipe';

@Component({
    selector: 'todo-list',
    pipes: [SearchPipe],
    directives: [TodoItemRenderer],
    template: `
        <ul>
            <li *ngFor="#todo of todoService.todos | search">
                <todo-item-renderer [todo]="todo"></todo-item-renderer>
            </li>
            
        </ul>
    `
})

 
-------------------
[LeetCode] Two Sum - Data structure design
[2016년 봄판] 정적 사이트 발생기 Hugo 도입 Tips① 설치 및 사이트 초기 제작

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage