Angular实现简单的toDoList以及数据持久化存储

[](()第二例：ToDoList

---

功能概述: 在第一例的基础上， 我们还可以通过点击checkBox来实时更改数据状态

HTML:

搜索条

<input type=“text” [(ngModel)]=“keyword” (keyup)=“doAdd($event)” />

---

正在运行

<input type=“checkbox” [(ngModel)]=“item.status” (change)="changeCheckBox() "/>{ { item.title }}

<button (click)=“onDelete(i)”>×

成功执行

<input type=“checkbox” [(ngModel)]=“item.status” (change)=“changeCheckBox()” />{ { item.title }}

<button (click)=“onDelete(i)”>×

CSS:

h2{

text-align: center;

}

.toDoList{

margin: 20px auto;

width: 400px;

li{

line-height: 60px;

}

}

TS:

import { Component, OnInit }