[英]How to pass Dynamic values to the modal using angular 2
嗨,我在這里有一個動態數據,其中以下面的按鈕形式顯示它們是代碼
<ng-container *ngFor="let data of mapData">
<div *ngIf="data.OrderState==='1'" class="ds">
<button [id]="data.DrId" class="btn btn-outline secondary">
{{data.Name}}
</button>
</div>
</ng-container>
現在單擊動態生成的按鈕后,我想發送data.Drid * data.Name到模式輸入字段,以及如何調用動態按鈕上的模式,將它們作為2參數傳遞,並在模式提交時獲取該數據紐扣
下面是bootstrap 4模態代碼,我如何將其應用於發送參數
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
在模板中,您可以(click)
事件調用方法。 即
<ng-container *ngFor="let data of mapData">
<div *ngIf="data.OrderState==='1'" class="ds">
<button [id]="data.DrId" class="btn btn-outline secondary"
(click)="buttonClicked(data.DrId, data.Name)">
{{data.Name}}
</button>
</div>
</ng-container>
在組件中,創建變量drId
和drName
並添加buttonClicked
方法,然后為這些變量分配來自buttonClicked
參數的值。 即
buttonClicked(id, name) {
this.drId = id;
this.drName = name;
`$('#exampleModal').modal('show')`
// You have id and name here, You can make use of these to display anywhere.
}
要從JavaScript處理模式,請參閱此鏈接-> https://getbootstrap.com/docs/4.0/components/modal/#via-javascript
您可以在引導程序模式模板中綁定這些變量
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<input class="" id ="" [value]="drId"/>
<input class="" id ="" [value]="drName">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.