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控制流中的工作 ...
随机推荐
- Centos7安装完成后设定基本的网络配置
Centos7设定网络 新安装的centos7,网络默认是不启动的,需要人为的手工修改配置文件,在这里把这个过程简要的记录一下. 设定ip地址与mac地址自定义 [root@web ~]# cd /e ...
- 🐯 php项目中类的自动加载
主要函数:spl_autoload_register() — 注册给定的函数作为 __autoload() 的实现 将函数注册到SPL __autoload函数队列中.如果该队列中的函数尚未激活,则激 ...
- 你该怎么学习C++——思想层面
Javascript是世界上最受误解的语言,其实C++何尝不是.坊间流传的错误的C++学习方法一抓就是一大把.我自己在学习C++的过程中也走了许多弯路,浪费了不少时间. 为什么会存在这么多错误认识?原 ...
- Unity3D 使用SQLite
使用Unity操作SQLite,需要用到三个库文件,分别是Mono.Data.Sqlite.dll和System.Data.dll和Sqlite3.dll,前两个库文件可以在unity中找到,具体步骤 ...
- STL源码之traits编程技法
摘要 主要讨论如何获取迭代器相应型别.使用迭代器时,很可能用到其型别,若需要声明某个迭代器所指对象的型别的变量,该如何解决.方法如下: function template的参数推导机制 例如: tem ...
- 【快捷键】【idea】的eclipse格式化快捷键Ctrl+Shift+F与win10冲突的解决方法
1.多按一个win键解决[Ctrl+Shift+Win+F],试了一下,只要F键最后按就可以了 注意:win键就是微软的logo键 2.先按Ctrl+F,然后松开F键[注意不要松开Ctrl键],再按S ...
- Mysql 查询时间段是否可用,查询时间段是否有交集
最近遇到 类似, 会议室预订的模型, 基本上 是 会议室 + 时间段来检测是否被占用. 其实思路比较简单 , 一开始的思路是 去查询 自己选择的时间段 与数据库已经存在的时间段匹配 是否 可用, ...
- iframe高度自适应的方法
第一种:iframe内容未知,高度可预测 这个时候,我们可以给它添加一个默认的CSS的min-height值,然后同时使用JavaScript改变高度.常用的兼容代码有: // document.do ...
- SQL Server 从Excel导入到数据库操作遇到的科学计数法问题
问题描述 今天在做从Excel导入数据到SQL Server 中将数据更新到表中,可惜就这一个简单的操作中出现了一点小插曲,就在我根据Excel中的编号关联表编号以此更新姓名字段时出现转换错误问题.如 ...
- 在Grafana使用普罗米修斯
aaarticlea/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IE ...