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. 用Zend Studio12 导入在workspace中的项目

    第一步: 文件(file)->新建(NEW)->其他(other) 第二步: 在打开的对话框里选择 常规(Genneral)->项目(Project) 第三步: 在打开的对话框输入项 ...

  2. OpenSSL加解密

    http://www.caole.net/diary/des.html Table of Contents OpenSSL - DES Summary DES使用的例子 另一个带注释的例子 另一段Co ...

  3. GCDAsyncUdpSocket的使用

    tips: 要注意服务器端口与客户端端口的区别,如果客户端绑定的是服务器的端口,那么服务器发送的消息就会一直发送给服务器.

  4. 面试(3)-java-se-java中的匿名内部类总结

    java中的匿名内部类总结 匿名内部类也就是没有名字的内部类 正因为没有名字,所以匿名内部类只能使用一次,它通常用来简化代码编写 但使用匿名内部类还有个前提条件:必须继承一个父类或实现一个接口 实例1 ...

  5. vue.js之生命周期,防止闪烁,计算属性的使用,vue实例简单方法和循环重复数据

    摘要:今天是比较糟糕的一天没怎么学习,原因是学校的wifi连不上了~~.今天学习一下vue的生命周期,如何防止闪烁(也就是用户看得到花括号),计算属性的使用,vue实例简单方法,以及当有重复数据时如何 ...

  6. ajaj简介

    1. 什么是ajax? ajax的全称 Asynchronous(异步) JavaScript and XML. ajax是一种用于创建快速动态网页的技术. 主要用于前后台的交互,在前后台的交互中还有 ...

  7. mfc简单框架的分析和原理记录

    由于最近在准备考试,可能博客的更新有点慢(呵,我又为自己的懒惰和拖延找借口,总之有时间就更新) 一.菜单 1.在windows中,菜单资源的识别通过HMENU句柄识别 ,但是这个开发过程比较繁琐 2. ...

  8. C# 计算地图上某个坐标点的是否在多边形内

    这个方法引用自群友的博客 https://www.xiaofengyu.com/?p=143 使用百度地图的时候,常常会用到判断一个点是否在一个多边形的范围内,该方法用到的是射线法, 通过修改Java ...

  9. omnigraffle 的一些总结

    http://jingyan.baidu.com/article/fcb5aff7a16337edab4a714d.html Omnigraffle绘制连接线时从任意点开始 点击直线工具后,在右侧设置 ...

  10. two sum[easy]

    Given an array of integers, return indices of the two numbers such that they add up to a specific ta ...