Angular ToDolist

Angular ToDolist

<div class="search_box">
    <input type="text" placeholder="请输入……"  [(ngModel)]="keyWord" (keyup)="keyUpFn($event)">
    <hr>
    <p>待办事件</p>
    <div class="search_list" *ngFor="let item of historyList;let key=index" [hidden]="item.status==1">
      <input type="checkbox" [(ngModel)]="item.status">  {{item.title}} <button (click)="delete(key)">X</button>
    </div>
    <p>已完成事件</p>
    <div class="search_list" *ngFor="let item of historyList;let key=index" [hidden]="item.status==0">
        <input type="checkbox" [(ngModel)]="item.status">  {{item.title}} <button (click)="delete(key)">X</button>
    </div>
</div>

export class ToDolistComponent implements OnInit {
  public keyWord: string;
  public historyList: any[] = [];
  constructor() { }

  ngOnInit() {
  }

  // 键盘事件
  keyUpFn(e) {
    if (e.keyCode == 13) {
      if (this.historyList.indexOf(this.keyWord) == -1) {
        this.historyList.push({
          title: this.keyWord,
          status: 0
        });
      }
      this.keyWord = '';
    }
  }
  // 删除信息事件
  delete(key) {
    this.historyList.splice(key, 1);
  }
}

Published 24 original articles · won praise 4 · Views 4461

Guess you like

Origin blog.csdn.net/Amo__/article/details/101292369