文档章节

angular2 动态添加input输入框

今天来找bug
 今天来找bug
发布于 2016/10/31 15:28
字数 152
阅读 1192
收藏 0

export class TComponent {

    username: any;
    id: number = 1;
    login:any = [{"username": "username" + this.id,"password": "pwd" + this.id}];

    addInput() {
        var number = this.login.length + 1;
        this.login.push({"username": "username" + number, "password": "pwd" + number});
    }

    removeInput(item) {
        console.log(item);
        let i = this.login.indexOf(item);
        console.log(i);
        this.login.splice(i, 1);
    }

}
<h5>动态添加表单</h5>
<div class="form">
    <div class="form-group form-group-sm" *ngFor="let i of login">
        <label class="col-form-label">用户名</label>
        <input class="form-control" [(ngModel)]="i.username" value="{{i.username}}">
        <label class="col-form-label">密码</label>
        <input class="form-control" [(ngModel)]="i.password" value="{{i.password}}">
        <button class="btn btn-link" (click)="removeInput(i)">Remove</button>
    </div>
    <button class="btn btn-link" (click)="addInput()">Add</button>
    {{ login | json }}
</div>

© 著作权归作者所有

今天来找bug
粉丝 10
博文 214
码字总数 36040
作品 0
深圳
程序员
私信 提问
加载中

评论(3)

今天来找bug
今天来找bug 博主

引用来自“mhmin”的评论

您好,您写的这个动态添加input输入框,索引上没有冲突吗?
只是简单地测试了没问题
mhmin
mhmin
您好,您写的这个动态添加input输入框,索引上没有冲突吗?
mhmin
mhmin
您好,您写的这个动态添加input输入框,索引上没有冲突吗?
AngularJS 的表单验证

今天我们将来看看Angular如何帮助做表单验证. 我们将讨论更多使用angular进行有关表单操作的东西(就像我们另外的一篇文章: 提交Ajax表单:AngularJS的方式). 不过不用担心,那篇文章不一定要...

oschina
2014/06/22
68.2K
7
使用AngularJS + Angular UI Router + Angular UI Bootstrap实现页签效果

要求效果: [size=10.5000pt] 页签数为三个,页签内容分别指向tab1.html,tab2.html,tab3.html 页签切换时前端路由需要对应改变 tab1.html,tab2.html,tab3.html页面里分别放入一个input 输入框...

FzPying
2017/02/15
686
3
【MVVM】- AngularJS基础学习

Angular JS ---- AngularJS 基础入门案例 外观页面 AngularJS 模块 模块是应用控制器的容器,Angularjs代码依赖Jquery,在使用angualrjs代码时,Jquery脚本文件须在AngularJS脚本之前加载,此...

ZeroneLove
02/27
27
0
如何优雅的使用 Angular 表单验证

随便说说,这一节可以跳过 去年参加 ngChine 2018 杭州开发者大会的时候记得有人问我: Worktile 是什么时候开始使用 Angular 的,我说是今年(2018年) 3 月份开始在新模块中使用最新的 An...

why520crazy
01/15
0
0
AngularJS 提交表单的方式

在AngularJS出现之前,很多开发者就面对了表单提交这一问题。由于提交表单的方式繁杂而不同,很容易令人疯掉……然而现在看来,依然会让人疯掉。 今天,我们会看一下过去使用PHP方式提交的表...

oschina
2014/06/21
60.8K
18

没有更多内容

加载失败,请刷新页面

加载更多

PyTorch入门笔记一

张量 引入pytorch,生成一个随机的5x3张量 >>> from __future__ import print_function>>> import torch>>> x = torch.rand(5, 3)>>> print(x)tensor([[0.5555, 0.7301, 0.5655],......

仪山湖
31分钟前
3
0
OSChina 周二乱弹 —— 开发语言和语言开发的能一样么

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @花间小酌:#今日歌曲推荐# 分享The Score的单曲《Revolution》 《Revolution》- The Score 手机党少年们想听歌,请使劲儿戳(这里) @批判派...

小小编辑
今天
2.2K
17
oracle ORA-39700: database must be opened with UPGRADE option

ORA-01092: ORACLE instance terminated. Disconnection forced ORA-00704: bootstrap process failure ORA-39700: database must be opened with UPGRADE option 进程 ID: 3650 会话 ID: 29......

Tank_shu
今天
3
0
分布式协调服务zookeeper

ps.本文为《从Paxos到Zookeeper 分布式一致性原理与实践》笔记之一 ZooKeeper ZooKeeper曾是Apache Hadoop的一个子项目,是一个典型的分布式数据一致性的解决方案,分布式应用程序可以基于它...

ls_cherish
今天
4
0
聊聊DubboDefaultPropertiesEnvironmentPostProcessor

序 本文主要研究一下DubboDefaultPropertiesEnvironmentPostProcessor DubboDefaultPropertiesEnvironmentPostProcessor dubbo-spring-boot-project-2.7.3/dubbo-spring-boot-compatible/au......

go4it
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部