Angular4實(shí)現(xiàn)動(dòng)態(tài)添加刪除表單輸入框功能
更新時(shí)間：2017年08月11日 14:29:36 作者：1葉知秋灬
這篇文章主要介紹了Angular4實(shí)現(xiàn)動(dòng)態(tài)添加刪除表單輸入框功能,需要的朋友可以參考下
首先介紹一下實(shí)現(xiàn)的效果,就是單一表單能實(shí)現(xiàn)添加其他的,也能刪除
代碼如下:
<h5>動(dòng)態(tài)添加表單</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)">刪除</button>
</div>
<button (click)="addInput()">增加</button>
<button (dblclick)="dbclick()">雙擊</button>
{{ login | json }}
</div>
username: any;
id: number = 1;
login:any = [{"username": "username" + this.id,"password": "pwd" + this.id}];
addInput() {
console.log('點(diǎn)擊');
console.log(this.login);
let number = this.login.length + 1;
this.login.push({"username": "username" + number, "password": "pwd" + number});
console.log(this.login);
}
removeInput(item) {
console.log(item);
let i = this.login.indexOf(item);
console.log(i);
this.login.splice(i, 1);
}
總結(jié)
以上所述是小編給大家介紹的Angular4實(shí)現(xiàn)動(dòng)態(tài)添加刪除表單輸入框功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
徹底學(xué)會(huì)Angular.js中的transclusion
這篇文章主要給大家介紹Angular.js中transclusion的相關(guān)資料，希望通過(guò)這一篇文章大家能夠弄懂Angular.js中的transclusion，文中介紹的很詳細(xì)，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-03-03
Angular ElementRef簡(jiǎn)介及其使用
這篇文章主要介紹了Angular ElementRef簡(jiǎn)介及其使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
AngularJS基礎(chǔ) ng-keydown 指令簡(jiǎn)單示例
本文主要介紹AngularJS ng-keydown 指令,在這里幫大家整理了ng-keydown 指令的基礎(chǔ)資料,并附有代碼,有需要的朋友可以參考下2016-08-08
angular實(shí)現(xiàn)表單驗(yàn)證及提交功能
這篇文章主要為大家詳細(xì)介紹了angular實(shí)現(xiàn)表單驗(yàn)證及提交功能的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
我們的接口是單獨(dú)編寫(xiě)的處理的，在實(shí)際的開(kāi)發(fā)項(xiàng)目中，有眾多的接口，有些需要登陸憑證，有些不需要。一個(gè)一個(gè)接口處理不妥，我們是否可以考慮對(duì)請(qǐng)求進(jìn)行攔截封裝，感興趣的可以了解一下2022-04-04
AngularJS ng-repeat指令中使用track by子語(yǔ)句解決重復(fù)數(shù)據(jù)遍歷錯(cuò)誤問(wèn)題
這篇文章主要介紹了AngularJS ng-repeat指令中使用track by子語(yǔ)句解決重復(fù)數(shù)據(jù)遍歷錯(cuò)誤問(wèn)題,結(jié)合實(shí)例形式分析了ng-repeat指令遍歷JavaScript數(shù)組錯(cuò)誤的原因與相關(guān)解決技巧,需要的朋友可以參考下2017-01-01
Angular2學(xué)習(xí)教程之ng中變更檢測(cè)問(wèn)題詳解
這篇文章主要給大家介紹了Angular2學(xué)習(xí)教程之ng中變更檢測(cè)問(wèn)題的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-05-05
今天小編就為大家分享一篇angular4強(qiáng)制刷新視圖的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
angular ng-model 無(wú)法獲取值的處理方法
今天小編就為大家分享一篇angular ng-model 無(wú)法獲取值的處理方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
淺談angular.js中實(shí)現(xiàn)雙向綁定的方法$watch $digest $apply
Angular用戶都想知道數(shù)據(jù)綁定是怎么實(shí)現(xiàn)的。你可能會(huì)看到各種各樣的詞匯：$watch,$apply,$digest它們是如何工作的呢？這里我想回答這些問(wèn)題，其實(shí)它們?cè)诠俜降奈臋n里都已經(jīng)回答了，但是我還是想把它們結(jié)合在一起來(lái)講2015-10-10