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