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的更多相关文章
-
JSF 2 multiple select dropdown box example
In JSF, <h:selectManyMenu /> tag is used to render a multiple select dropdown box – HTML selec ...
-
Angular 1 深度解析:脏数据检查与 angular 性能优化
TL;DR 脏检查是一种模型到视图的数据映射机制,由 $apply 或 $digest 触发. 脏检查的范围是整个页面,不受区域或组件划分影响 使用尽量简单的绑定表达式提升脏检查执行速度 尽量减少页面 ...
-
[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 ...
-
angular ng build --prod 打包报错解决方案
使用以下代码 就不报错了 ng build --prod --no-extract-license 打包命令 使用以下代码 就不报错了 ng build --prod --no-extrac ...
-
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 ...
-
Angular 学习笔记 (Material Select and AutoComplete)
记入一些思考 : 这 2 个组件有点像,经常会搞混. select 的定位是选择. 目前 select 最糟糕的一点是 not search friendly. 还有当需要 multiple sele ...
-
webstorm 打包angular Module build failed: Error: No PostCSS Config found
angular创建项目后,在webstorm中启动时,报出如题错误,奇怪的是我从命令行启动(ng server)是没有问题的,多方寻求无果,在网上看到过说要加一个配置文件,我不信.我觉得是我配置哪里有 ...
-
angular中的 input select 值绑定无效,以及多出一个空白选项问题
问题: <!-- 问题标签 --> <select ng-model="sortType"> <option value="1"& ...
-
Angular JS ng-model对<;select>;标签无效的情况
使用场景一: <select ng-if="item.award_type==1" id="award{{$index+1}}" name="X ...
随机推荐
-
游戏服务器菜鸟之C#初探四游戏服务
经过多次折腾之后,在一次进行了一次重大的重构,去解决问题 主要重构如下 1.将原来的单一协议修改多协议进行,一些查询.认证的功能都采用HTTP进行,避免全部采用TCP链接资源的消耗: 2.原来单一的部 ...
-
codeforces 558B. Amr and The Large Array 解题报告
题目链接:http://codeforces.com/problemset/problem/558/B 题目意思:给出一个序列,然后找出出现次数最多,但区间占用长度最短的区间左右值. 由于是边读入边比 ...
-
RAD,V模型
介绍: RAD(Rap Application Developmen快速应用开发t)模型是软件开发过程中的一个重要模型,由于模型构图类似字母V,所以又称为软件开发的V模型.它通过开发和测试同时进行的方 ...
-
配置xdebug远程调试php的三种方法(配合phpstorm)
使用xdebug对PHP进行远程调试是一个php程序员一定要掌握的技能,关于在本机设置xdebug进行调试的方法,请自行百度,下面说一下如何配置远程服务器在开发机上的调试. 首先要在远程服务器上安装x ...
-
LaTeX排版指南
V0.0.1 工具链 CTeX:http://www.ctex.org/HomePage ,CTeX是一个中文套装,但也同时发布一个独立的ctex宏包 TeXLive:https://tug.org/ ...
-
《Android源代码设计模式解析与实战》读书笔记(十四)
第十四章.迭代器模式 迭代器模式,又叫做游标模式.是行为型设计模式之中的一个.我们知道对容器对象的訪问必定会涉及遍历算法.我们能够将遍历的方法封装在容器中,或者不提供遍历方法,让使用容器的人自己去实现 ...
-
Netty(三) 什么是 TCP 拆、粘包?如何解决?
前言 记得前段时间我们生产上的一个网关出现了故障. 这个网关逻辑非常简单,就是接收客户端的请求然后解析报文最后发送短信. 但这个请求并不是常见的 HTTP ,而是利用 Netty 自定义的协议. 有个 ...
-
java 虚拟机内存划分,类加载过程以及对象的初始化
涉及关键词: 虚拟机运行时内存 java内存划分 类加载顺序 类加载时机 类加载步骤 对象初始化顺序 构造代码块顺序 构造方法 顺序 内存区域 java内存图 堆 方法区 虚拟机栈 本地 ...
-
2 Servlet 细节
1 Servlet 配置详解 ① 由于客户端在浏览器只能通过URL访问web服务器的资源,所以Servlet程序若想被外界访问,必须把Servlet 程序映射到一个URL 地址上,这个工作在项目we ...
-
operator new和operator delete
从STL源码剖析中看到了operator new的使用 template<class T> inline void _deallocate(T* buffer) { ::operator ...