We want the start-pipe more flexable to get param, so when using it, we pass a second param as status:

<li *ngFor="#todo of todoService.todos | started : 'started'">

It will be handled as a second param which is an array of the transform() function:

    transform(todos, [status]){
        return todos.filter(
            (todoModel) => {
                // Only showing the todo starts with 'e'
                return todoModel.status === status;
            }
        )
    }

So No we will only pipe 'started' status. We need a selector to handle the status:

import {Component, EventEmitter, Output} from 'angular2/core';
@Component({
    selector: "status-selector",
    template: `
        <div>
            <select #sel (change)="selectedStatus.emit(sel.value)">
                <option *ngFor="#status of statuses">
                    {{status}}
                </option>
            </select>
        </div>
    `
})

export class StatusSelector{
    @Output() selectedStatus = new EventEmitter();
    statuses = ["started", "completed"];

    ngOnInit(){
        this.selectedStatus.emit(this.statuses[0]);
    }
}

And pass the output to the list:

    template: `
        <todo-input></todo-input>
        <status-selector (selectedStatus)="status=$event"></status-selector>
        <todo-list [status]="status"></todo-list>
    `

Then in the list, we use that selected status:

<li *ngFor="#todo of todoService.todos | started : status">

------------------------------

[Angular 2] Build a select dropdown with *ngFor in Angular 2的更多相关文章

  1. JSF 2 multiple select dropdown box example

    In JSF, <h:selectManyMenu /> tag is used to render a multiple select dropdown box – HTML selec ...

  2. [Angular CLI] Build application without remove dist folder for Docker Volume

    When we develop the Angular app inside Docker container, we can simulate Production envioment by bui ...

  3. angular ng build --prod 打包报错解决方案

    使用以下代码  就不报错了 ng build --prod --no-extract-license    打包命令 使用以下代码  就不报错了 ng build --prod --no-extrac ...

  4. Angular中 build的时候遇到的错误--There are multiple modules with names that only differ in casing

    今天早上遇到一个Angular的编译的时候的错误 具体信息: There are multiple modules with names that only differ in casing.This ...

  5. Angular 学习笔记 (Material Select and AutoComplete)

    记入一些思考 : 这 2 个组件有点像,经常会搞混. select 的定位是选择. 目前 select 最糟糕的一点是 not search friendly. 还有当需要 multiple sele ...

  6. webstorm 打包angular Module build failed: Error: No PostCSS Config found

    angular创建项目后,在webstorm中启动时,报出如题错误,奇怪的是我从命令行启动(ng server)是没有问题的,多方寻求无果,在网上看到过说要加一个配置文件,我不信.我觉得是我配置哪里有 ...

  7. angular中的 input select 值绑定无效,以及多出一个空白选项问题

    问题: <!-- 问题标签 --> <select ng-model="sortType"> <option value="1"& ...

  8. Angular JS ng-model对&lt;select&gt;标签无效的情况

    使用场景一: <select ng-if="item.award_type==1" id="award{{$index+1}}" name="X ...

  9. [Angular Directive] Build a Directive that Tracks User Events in a Service in Angular 2

    A @Directive is used to add behavior to elements and components in your application. This makes @Dir ...

随机推荐

  1. git学习——git理解和仓库的创建

    一.git用的3个工作的状态的理解. 1. 工作区 workspace(modified); 2. 暂存区 stage(staged) ; 3. git本地仓库 repository(commited ...

  2. Mysql:Error Code 1235,This version of MySQL doesn’t yet support ‘LIMIT &amp; IN/ALL/ANY/SOME 错误解决

    This version of MySQL doesn’t yet support ‘LIMIT & IN/ALL/ANY/SOME 错误解决 这次国庆节回来后的测试中,在一个Mysql表达式 ...

  3. asp.net中session的原理及应用

    Session简介丶特性 1.Session是一种Web会话中的常用状态之一. 2.Session提供了一种把信息保存在服务器内存中的方式.他能储存任何数据类型,包含自定义对象. 3.每个客户端的Se ...

  4. iOS 开发之重力动画效果

    步骤:1.使用single view application创建新的项目 2.在viewcontroller.h文件中创建一个图片实例并与相关图片相连,然后创建一个UIDynamicAnimator ...

  5. Backbone Events 源码笔记

    用了backbone一段时间了,做一些笔记和总结,看的源码是1.12 backbone有events,model,collection,histoty,router,view这些模块,其中events ...

  6. c# 获取MAC IP TCP列表

    转载自baidu:http://hi.baidu.com/jackeyrain/item/ff94efcfd5cf3a3099b498e9 namespace Public { public clas ...

  7. linux中patch命令 -p 选项

    patch命令和diff命令是linux打补丁的成对命令,diff 负责生产xxxxx.patch文件,patch命令负责将补丁打到要修改的源码上.但是patch命令的参数-p很容易使人迷惑,因为对- ...

  8. PHP学习笔记11-表单

    处理GET请求 实现的功能是输入姓名后页面显示“Hello XXX” 创建html文件hello.html: <!DOCTYPE html> <html> <head l ...

  9. Bootstrap 常用组件汇总

    Bootstrap 官方文档:http://www.bootcss.com/ Bootstrap Multiselect 多选下拉组件 官方文档:http://www.kuitao8.com/demo ...

  10. 苹果IOS下text-shadow与box-shadow失效的解决办法

    加入以下样式,可以解决苹果IOS下text-shadow与box-shadow失效的问题 -webkit-appearance: none