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”向数组添加数据
- 实现的功能:在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); /*删除数组的数据*/
}
}
angularcli 第六篇(todolist 列表)的更多相关文章
- 解剖SQLSERVER 第十六篇 OrcaMDF RawDatabase --MDF文件的瑞士军刀(译)
解剖SQLSERVER 第十六篇 OrcaMDF RawDatabase --MDF文件的瑞士军刀(译) http://improve.dk/orcamdf-rawdatabase-a-swiss-a ...
- 解剖SQLSERVER 第六篇 对OrcaMDF的系统测试里避免regressions(译)
解剖SQLSERVER 第六篇 对OrcaMDF的系统测试里避免regressions (译) http://improve.dk/avoiding-regressions-in-orcamdf-b ...
- 第六篇 Replication:合并复制-发布
本篇文章是SQL Server Replication系列的第六篇,详细内容请参考原文. 合并复制,类似于事务复制,包括一个发布服务器,一个分发服务器和一个或多个订阅服务器.每一个发布服务器上可以定义 ...
- 第六篇 Integration Services:初级工作流管理
本篇文章是Integration Services系列的第六篇,详细内容请参考原文. 简介在前几篇文章中,我们关注使用增量加载方式加载数据.在本篇文章,我们将关注使用优先约束管理SSIS控制流中的工作 ...
- Python之路【第六篇】:socket
Python之路[第六篇]:socket Socket socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,应用程序通常通过"套接字&quo ...
- 【Python之旅】第六篇(七):开发简易主机批量管理工具
[Python之旅]第六篇(七):开发简易主机批量管理工具 python 软件开发 Paramiko模块 批量主机管理 摘要: 通过前面对Paramiko模块的学习与使用,以及Python中多线程与多 ...
- ElasticSearch入门 第六篇:复合数据类型——数组,对象和嵌套
这是ElasticSearch 2.4 版本系列的第六篇: ElasticSearch入门 第一篇:Windows下安装ElasticSearch ElasticSearch入门 第二篇:集群配置 E ...
- 【译】第六篇 Replication:合并复制-发布
本篇文章是SQL Server Replication系列的第六篇,详细内容请参考原文. 合并复制,类似于事务复制,包括一个发布服务器,一个分发服务器和一个或多个订阅服务器.每一个发布服务器上可以定义 ...
- 【译】第六篇 Integration Services:初级工作流管理
本篇文章是Integration Services系列的第六篇,详细内容请参考原文. 简介在前几篇文章中,我们关注使用增量加载方式加载数据.在本篇文章,我们将关注使用优先约束管理SSIS控制流中的工作 ...
随机推荐
- mysql中字符串的隐藏字符处理
三步解决mysql字符串的隐藏字符: 1. 隐藏字符导致字符串长度边长,用mysql 自带的 Hex函数让隐藏字符显示真身, 2. 可以拿到隐藏字符的16进制码,然后用windows自带的计算器转化成 ...
- cp复制
将Data文件复制到B目录下: cp -r /home/hp/Data /home/hp/B/
- Egret《决战沙城》框架学习
源码地址:https://github.com/yicaoyimuys/EgretGameEngine 虽然走花观马看了看,但是收获还是蛮多. mvc: BaseController ...
- 内存自动清理.sql
--清除存储过程缓存 DBCC FREEPROCCACHE --注:方便记住关键字 FREEPROCCACHE可以拆解成 FREE(割舍,清除) PROC(存储过程关键字简写),CACHE(缓存) - ...
- EasyNVR摄像机网页无插件直播方案H5前端构建之:通道内部搜索功能的实现方案与代码
EasyNVR网页摄像机直播方案 EasyNVR是一款拥有完整.自主.可控知识产权,同时又能够具备软硬一体功能的安防互联网化流媒体服务器,能够通过简单的网络摄像机通道配置,将传统监控行业里面的高清网络 ...
- 历时一年《Python自动化测试实战》终于出版!!!
一.为什么会写这本书 1.系统梳理.可以加深自己对测试知识体系的系统梳理 2.名气.增加个人的名气,比如:面试时,可以很自豪的说,我是xxxx书的作者 3.利他.帮助有需要的学习者更系统.完备的学习和 ...
- sublime 光标由竖线变下横线
编程时偶尔会突然出现光标突然间由“小竖线”变成“黑块矩形”,网上有说在控制面板中进行设置.由于光标是在使用中突然发生变化,推测是碰到了快捷键,因此断定有快捷键可以修改.后来,无意中碰到了“Insert ...
- dedecms原理及使用
dedecms原理 简单使用 现在老板要求你做一个文章管理系统,栏目(类别)包括(武侠.爱情.音乐...) ,每个栏目(类别)有对应的文章,文章已经给你准备好了,请你在30分钟搞定该网站,怎么样? 步 ...
- linux centos7 安装虚拟Python环境,pyenv安装文档
python多版本控制pyenv安装文档 1.在线安装: curl -L https://github.com/pyenv/pyenv-installer/raw/master/bin/pyenv-i ...
- 基于redis+lua实现高并发场景下的秒杀限流解决方案
转自:https://blog.csdn.net/zzaric/article/details/80641786 应用场景如下: 公司内有多个业务系统,由于业务系统内有向用户发送消息的服务,所以通过统 ...