angularcli 第六篇（todolist 列表）

1、通过文本框输入，向数组添加数据

<!-- 通过文本框输入，向数组添加数据 push -->

<input type="text" name="111" [(ngModel)]="username">
<button (click)="addData()">增加</button>
<ul>
    <li *ngFor='let item of list'>
        {{item}}
    </li>
</ul>

export class TodolistComponent implements OnInit {
    public username:any='';
    public list=[];

    addData(){
        this.list.push(this.username);/*向数组推数据*/
    }
}

 

2、删除数组的数据

<!-- 删除数组的数据 splice -->

<input type="text" name="111" [(ngModel)]="username">
<button (click)="addData()">增加</button>
<ul>
    <li *ngFor='let item of list ;let i=index;'>
        {{item}} ------ <button (click)='deleteData(i)'>删除</button>
    </li>
</ul>

export class TodolistComponent implements OnInit {
    public username:any='';
    public list=[];

  addData(){
      this.list.push(this.username);   /*向数组推数据*/
  }
  deleteData(aaa){   /* 将索引值i赋给aaa */
      this.list.splice(aaa,1);   /*删除数组的数据*/
  }
}

 

3、按下键盘回车“Enter”向数组添加数据

 具体参照angularcli第四篇（执行事件）

• 实现的功能：在input框中输入数据，前面是通过按下按钮数据添加到数组中，现在要改成按下回车键：

• 步骤：

（1）给input增加鼠标监听事件：

通过keyup / keydown监听鼠标是否按下input框（鼠标监听事件keyup / keydown，鼠标按下、抬起增加触发事件）。

（2）怎么知道我们在键盘上按的是哪个键？

通过事件对象 $event，来获取鼠标所监听的对象（即：input）在键盘上按下哪个键。

代码：
<input type="text" [(ngModel)]="username" (keyup)="addData($event)">
 <ul>
     <li *ngFor='let item of list;let i=index;'>
         {{item}} ------ <button (click)='deleteData(i)'>删除</button>
     </li>
 </ul>
 
 export class TodolistComponent implements OnInit {
  　　public username:any='';
  　　public list=[];
  　　addData(e){
        /* console.log(e); */
     　　if (e.keyCode==13) {
        　　this.list.push(this.username)   /* 在input框中输入数据，按下回车键，数据添加到数组中 */
　　　　　　　this.username='';         /* 输入数值回车之后，清空输入框 */
     　　}
   　}
    deleteData(aaa){
    　　this.list.splice(aaa,1);    /*删除数组的数据*/
  　}
}

 

3、将数组列表分成“已完成”和“未完成”，通过按钮来转换

• 实现的功能：点击 “改变状态” 切换数据的状态、点击 “删除” 就删除该条数据。

• 思路：为每一条数据添加一个状态，值为 “1” 或 “2” ；  再加一个按钮，这个按钮的作用就是改变状态的值；  通过条件判断，状态为1时显示“正在进行”，状态为2时显示“已完成”。
• 步骤：

（1）定义一个对象,对象里包括数据内容、状态     var obj={ username:this.username , status:1 }

（2）向数组中推入这个对象，将  this.list.push(this.username)  改成   this.list.push(obj); 

（3）HTML中： 将  {{item}}  改成  {{item.username}} 

（4）添加一个button，点击事件改变 status 的值       changeData(bbb) {   this.list[bbb].status=2;  }

（5）在 <li> 标签中添加条件判断语句   *ngIf='status==1'  或者  [hidden]='status==2'  来控制显示和隐藏

注：一个元素上边没法绑定多个模板， <li> 标签上已经绑定了*ngFor，所有这里用 [hidden]。

<label>输入框：</label>
<input type="text" [(ngModel)]="username" (keyup)="addData($event)">

<h2>正在进行:</h2>
<ul>
    <li *ngFor='let item of list ;let i=index;' [hidden]='item.status==2'>   <!-- status=2时隐藏 -->
        <button (click)='changeData(i)'>改变状态</button>
        {{item.username}} ----- {{item.status}}   <!-- 获取对象中的username和status -->
        <button (click)='deleteData(i)'>删除</button>
    </li>
</ul>

<h2>已经完成:</h2>
<ul>
    <li *ngFor='let item of list ;let i=index;' [hidden]='item.status==1'>   <!-- status=1时隐藏 -->
        <button (click)='changeData(i)'>改变状态</button>
        {{item.username}}-----{{item.status}}
        <button (click)='deleteData(i)'>删除</button>
    </li>
</ul>

typescript代码：
export class TodolistComponent implements OnInit {
    public username:any='';
    public list=[];

  constructor() { }

  ngOnInit() {
  }

  addData(e){

      var obj={     /* 定义一个对象 */
          username:this.username,
          status:1
      }
      if (e.keyCode==13) {
          this.list.push(obj);   /* 向数组中添加对象obj */
          this.username='';     /* 清空输入框 */
      }
  }
  changeData(bbb){   /*改变状态*/
      this.list[bbb].status=2;
  }

  deleteData(aaa){
      this.list.splice(aaa,1);   /*删除数组的数据*/
  }
}