[Angular 2] Using Pipes to Filter Data
Angular to Data Using filter
2023-09-14 08:59:20 时间
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 ){ } }
相关文章
- [React Testing] Use Generated Data in Tests with tests-data-bot to Improve Test Maintainability
- [Angular] Scrolling the Message List To the Bottom Automatically Using OnChanges
- [Angular Directive] 2. Add Inputs to Angular 2 Directives
- [Angular 2] Dispatching Action with Payloads and type to Reducers
- [Angular 2] Child Router
- [Angular 2] Using Pipes to Filter Data
- [Angular 2] Passing data to components with @Input
- [Angular] Angular Attribute Decorator - When to use it?
- [Angular] Remove divs to Preserve Style and Layout with ng-container in Angular
- [AngularFire] Angular File Uploads to Firebase Storage with Angular control value accessor
- [Angular] Use Angular style sanitization to mark dynamic styles as trusted values
- [Angular] Testing @Input and @Output bindings
- [Angular] Subscribing to the valueChanges Observable
- [Angular] Scrolling the Message List To the Bottom Automatically Using OnChanges
- [Angular 2] BYPASSING PROVIDERS IN ANGULAR 2
- [Angular 2] Mapping Streams to Values to Affect State
- [AngularJS] angular-md-table for Angular material design
- [Angular 2] Passing data to components with @Input
- [Immutable + AngularJS] Use Immutable .List() for Angular array
- Angular HTTPClient 发送请求的触发方式讨论
- Angular 如何为多个项目使用单一存储仓库
- 如何处理Angular项目在Visual Studio Code打开报关于@Decorators的警告信息