2016年12月19日

Angular2でただ追加するだけのTODOリスト

Angular2でただTODOを1行ずつ追加するだけのTODOリスト。とりあえずngModelを入力フォームに設定したけど直接取得したい。

import { Component } from '@angular/core';

export class Hero {
id: number;
name: string;
}

const HEROES: Hero[] = [];

@Component({
selector: 'app-root',
styles: [`
input[type='button']{
background:#CCC;
}
input[type='text']{
border:1px solid #CCC;
}
`],
template:`
<h1>{{title}}</h1>
<ul>
<li *ngFor="let hero of heroes">
{{hero.id}} : {{hero.name}}
</li>
</ul>
<div>
<div>
<input type="text" [(ngModel)]="addText">
<input type="button" value="追加" (click)="onClick()">
</div>
</div>
`
})
export class AppComponent {
title = 'Tour of Heroes';
heroes = HEROES;
addText: string;
onClick(){
if(!this.addText)return false;
this.heroes.push({
id: this.heroes.length+1,
name: this.addText
});
this.addText='';
}
}
タグ:Angular2
posted by ねこまんま at 21:22 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック