[Angular 2] Build a select dropdown with *ngFor in Angular 2
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 ...
随机推荐
- php获取某个目录下面文件的内容
if(!defined('PATH'))define('PATH', dirname(dirname(__FILE__)).'/');ini_set ( 'include_path', '.:' . ...
- parent.location.href和location.href区别
parent.location.href='ind.php'parent用于框架结构,需要全网页转向如果你的网页是左右框架,那么,直接把当前页面全部转到ind.php中 location.href=' ...
- CAGradientLayer实现色差动画
效果图: 代码部分: RPGradientAnimationView.h #import <UIKit/UIKit.h> typedef enum : NSUInteger { RPGra ...
- sql查询语句心得
1)where 有多个用in ,一个用= 2)自身链接 select A.Sno from S A,S B where A.Sname='a' AND A.City=B.City)) 3)外链接(同时 ...
- 配置mysql允许远程连接
开启MySQL数据库的远程连接权限: use mysql://进入数据库 grant all privileges on *.* to root@'%'identified by '123465789 ...
- (转)C#.NET使用TTS引擎实现文语转换
(转)C#.NET使用TTS引擎实现文语转换 本文讲述使用微软TTS5.1语音引擎(中文)实现文本阅读和音频输出为WAV完美解决方案. 网上很多文章说的是要安装SAPI.51 SDK,而这个东西有好几 ...
- Sencha Architect 激活方法
Sencha Architect 2是ExtJS和Sencha Touch的官方可视化IDE工具.最新版本是2.2,说是破解,其实是修改License来实现无限试用而已. 1.先下载安装官方软件,大 ...
- Installing Mp4box in centos 6
Installing Mp4box in centos 6 Installing Mp4box in centos 6Login to the server cd /usr/local/src/ ...
- 魔法方法:算术运算 - 零基础入门学习Python042
魔法方法:算术运算 让编程改变世界 Change the world by program 我现在重新提一个名词:工厂函数,不知道大家还有没有印象?我们在老早前就提到过Ta,由于那时候我们还没有学习类 ...
- Number对象
<script type="text/javascript"> /* Number对象. 创建Number对象的方式: 方式1: var 变量= new Number( ...