Angular学习第五课--todolist的小demo

分手后的思念是犯贱 2023-03-01 12:22 3阅读 0赞

1、表单代码

<h2>todoList</h2>
    <div class="todolist">
    	
        <input class="form_input" type="text" [(ngModel)]="keyword" (keyup)="doAdd($event)" />
    
        <hr>
    
    
        <h3>待办事项</h3>
        
        <ul>
    		
          <li *ngFor="let item of todolist;let key=index;" [hidden]="item.status==1">
            
            
           <input type="checkbox" [(ngModel)]="item.status" />  {
       {item.title}}   ------ <button (click)="deleteData(key)">X</button>
          
          
          
          </li>
        </ul>
    
    
        <h3>已完成事项</h3>
    
    
    
        <ul>
            <li *ngFor="let item of todolist;let key=index;" [hidden]="item.status==0">
              
              
             <input type="checkbox" [(ngModel)]="item.status" />  {
       {item.title}}   ------ <button (click)="deleteData(key)">X</button>
            
            
            
            </li>
          </ul>
    
    </div>

2、js代码

import { Component, OnInit } from '@angular/core';
    
    @Component({
      selector: 'app-todolist',
      templateUrl: './todolist.component.html',
      styleUrls: ['./todolist.component.scss']
    })
    export class TodolistComponent implements OnInit {
    
    
    //定义变量keyword
      public keyword:string;
    //定义数组todolist
      public todolist:any[]=[];
    
    
      constructor() { }
    
      ngOnInit() {
      }
    
      //添加事件
      doAdd(e){
    
        //如果是回车键
        if(e.keyCode==13){
           
            //要添加的keyword在已添加的数组中未出现时
            if(!this.todolistHasKeyword(this.todolist,this.keyword)){
              this.todolist.push({//keyword将关键字，添加入数组
                title:this.keyword,
                status:0                   //0表示代办事项  1表示已完成事项
              });
    
              this.keyword='';//添加完以后将关键字设值为空字符串
    
            }else{
    
              alert('数据已经存在');
              this.keyword='';
            }
         }
        
      }
    //从已添加的数组中删除某个搜索关键词
      deleteData(key){
    
      //splice()数组函数
        this.todolist.splice(key,1);
      }
    
      //如果数组里面有keyword返回true  否则返回false
      todolistHasKeyword(todolist:any,keyword:any){
    
       
    
        //异步  会存在问题
        // todolist.forEach(value => {
    
        //   if(value.title==keyword){
    
        //       return true;
        //   } 
        // });
    
        
    
        if(!keyword) return false;
    
        for(var i=0;i<todolist.length;i++){
          if(todolist[i].title==keyword){
    
              return true;
          } 
        }
        return false;
    
      }
    
    
    }