35Angular实现一个todoList

 

 

<div class="todolist">
    <h3>ToDoList</h3>
    <input class="todo" type="text" [(ngModel)]="keyword"  (keyup)=keyup($event)>
    <p>代办事项：</p>
        <h4 *ngFor="let item of todoList;let key = index;" [hidden]="item.state==1"> <!--选中了item.state等于1，那么这个item放到已完成事项中-->
             <p> {{item.title}}-------<span (click)="delete(key)">X</span> <input type="checkbox" [(ngModel)]="item.state"> </p>    
        </h4>

    <p>已完成事项：</p>
    <h4 *ngFor="let item of todoList;let key=index;" [hidden]="item.state==0">
        <p>{{item.title}}-------<span (click)="delete(key)">X</span></p>
    </h4>
</div>

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

@Component({
  selector: 'app-todolist',
  templateUrl: './todolist.component.html',
  styleUrls: ['./todolist.component.css']
})
export class TodolistComponent implements OnInit {
  keyword:string='';//输入框中输入的关键词
  state:any='';//状态，用来判断是待完成事项还是已完成事项
  todoList:Array<any>=[];//包含关键词的数组，数组中每一个元素是一个对象（title:'',state:'');

  constructor() { }

  ngOnInit() {
  }

  keyup(e){ //鼠标弹起
    if(e.keyCode==13){ //按下回车键
      console.log(this.keyword);
      if(this.hasKeyWord(this.keyword,this.todoList)){ //可以push到数组的条件是hasKeyWord()返回true,也就是keyword没有出现过
        this.todoList.push({
          title: this.keyword,
          state: 0,
        });
      }
      this.keyword='';//打印出keyword，要清空输入框
    }
    
  }

  delete(keyIndex){ 
    console.log(keyIndex);
    this.todoList.splice(keyIndex,1);
  }


  hasKeyWord(keyword:any,todoList:any){ //判断关键词是否在todoList中出现过的方法
    for(let i=0;i<todoList.length;i++){ //循环遍历todoList数组
      if(todoList[i].title==keyword){ //如果数组里有了keyword，返回false
        return false;
      }
    }
    return true;//返回true，说明没有keyword
  }

  

}