TodoList

深碍√TFBOYSˉ_ 2022-01-20 08:27 269阅读 0赞

# 项目截图 #

# html #

<input type="text" [(ngModel)]="keywords"  (keyup)='doAdd($event)' />
    <button (click)="doSearch()">add....</button>
    
    <hr>
    
    <h3>待办事项</h3>
    <ul>
      <li *ngFor="let item of history_List;  let key=index;"  [hidden]="item.status == 1" >
          <input type="checkbox" [(ngModel)]="item.status"  [id]="'check' + key"  />
          <label [for]="'check' + key" >{
        {item.title}}</label> --{
        {item.status}}-- <button (click)="delete_history(key)">X</button>
      </li>
    </ul>
    
    <br>
    <hr>
    
    <h3>已经完成的事情</h3>
    <ul>
        <li *ngFor="let item of history_List;  let key=index;"  [hidden]="item.status == 0" >
          <input type="checkbox" [(ngModel)]="item.status"   [id]="'check' + key"  />
          <label [for]="'check' + key" >{
        {item.title}}</label>  --{
        {item.status}}--  <button (click)="delete_history(key)">X</button>
      </li>
      </ul>
    复制代码

# component #

import { Component, OnInit } from '@angular/core';
    
    @Component({
      selector: 'app-search',
      templateUrl: './search.component.html',
      styleUrls: ['./search.component.less']
    })
    export class SearchComponent implements OnInit {
    
      public keywords:string;
    
      public history_List:any[] = [
        {
          title:'do homeword',
          status:0
        },
        {
          title:'go shopping',
          status:1
        },
        {
          title:'play games',
          status:0
        },
    
      ];
    
      constructor() { }
    
      ngOnInit() {
      }
    
      doSearch(){
        //   如果关键字不存在 返回-1  就push  也就是有没有重复的数据
        if(this.if_has_ketwords(this.history_List , this.keywords)){
            this.history_List.push({
              title:this.keywords,
              status:0         // 0 表示 待办事项  1 表示已经完成的事项
            });
        }
        this.keywords='';
      }
    
      doAdd(ev){
        if(ev.keyCode == 13){
          this.doSearch();
        }
      }
    
      delete_history(key){
        this.history_List.splice(key,1);
      }
    
    
    
      if_has_ketwords(history_List:any , keywords:any){
    
        if(!keywords){
          return false;
        }
    
        for(let i=0 ; i < history_List.length;i++){
          if(history_List[i].title == keywords){
            return false;
          }
        }
    
        return true;
    
      }
    
    }
    
    复制代码