在表格中添加此行没有限制,您可以使用循环或任何实际添加行的内容。请记住,行内有嵌套循环,用户也可以一键删除整行。
这是我的HTML。
<div class="fullWrap" style="margin-top: 20px;">
<h4 class="blue">Prescription</h4>
<table class="medicineInstGrid addPrescriptionGrid">
<tr class="head">
<th rowspan="2">Name Of Medicine</th>
<th rowspan="2" width="50">Dose</th>
<th rowspan="2" width="100">Dose Type</th>
<th colspan="2">Breakfast</th>
<th colspan="2">Lunch</th>
<th colspan="2">Evening Snack</th>
<th colspan="2">Dinner</th>
<th rowspan="2" width="50">Days</th>
<th rowspan="2">Comments</th>
</tr>
<tr class="head">
<th>Before</th>
<th>After</th>
<th>Before</th>
<th>After</th>
<th>Before</th>
<th>After</th>
<th>Before</th>
<th>After</th>
</tr>
<tr>
<td>
<div class="fullWrap medicineSearchWrap">
<input type="text" name="" required value="{{medSearchOnClickName}}"
#searchMedBox (keyup)="getSearchMedInput(searchMedBox.value)" >
<div class="fullWrap" *ngIf="medicineSearchDropDown">
<div class="innerLoadingWrap" style="z-index:999;width: 400px" *ngIf="medSearchLoader">
<md-spinner strokeWidth="7"></md-spinner>
</div>
<ul class="fullWrap medicineSearchResult" >
<li *ngFor="let medList of searchMedicine" >
<div class="fullWrap" style="padding: 10px" (click)="getMedicineOnClick(medList.name, medList.form); medicineSearchDropDown=false">
<div class="fullWrap">
<h4>
{{medList.name}} (<div class="rupeeIcon"></div>{{medList.price}})</h4>
<p>{{values}}</p>
</div>
<div class="fullWrap">
<span class="pullLeft">{{medList.manufacturer}}</span>
<span class="pullRight">
<b>Constituents: </b>
<span *ngFor="let constituents of medList.constituents">
{{constituents.name}}
</span>
</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</td>
<td>
<div class="fullWrap">
<input type="text" name="" required>
</div>
</td>
<td>
<div class="fullWrap">
<input type="text" value="{{medSearchOnClickDoseType}}" name="">
</div>
</td>
<td>
<div class="customCheckBox" style="margin-bottom:0">
<input type="checkbox" name="" value="">
<div class="check"></div>
</div>
</td>
<td>
<div class="customCheckBox" style="margin-bottom:0">
<input type="checkbox" name="" value="">
<div class="check"></div>
</div>
</td>
<td>
<div class="customCheckBox" style="margin-bottom:0">
<input type="checkbox" name="" value="">
<div class="check"></div>
</div>
</td>
<td>
<div class="customCheckBox" style="margin-bottom:0">
<input type="checkbox" name="" value="">
<div class="check"></div>
</div>
</td>
<td>
<div class="customCheckBox" style="margin-bottom:0">
<input type="checkbox" name="" value="">
<div class="check"></div>
</div>
</td>
<td>
<div class="customCheckBox" style="margin-bottom:0">
<input type="checkbox" name="" value="">
<div class="check"></div>
</div>
</td>
<td>
<div class="customCheckBox" style="margin-bottom:0">
<input type="checkbox" name="" value="">
<div class="check"></div>
</div>
</td>
<td>
<div class="customCheckBox" style="margin-bottom:0">
<input type="checkbox" name="" value="">
<div class="check"></div>
</div>
</td>
<td>
<div class="fullWrap">
<input type="text" name="" required>
</div>
</td>
<td>
<div class="fullWrap">
<input type="text" name="">
</div>
</td>
</tr>
</table>
<div class="normalSection" style="padding: 0 5px">
<div class="greyAddBtn">
<h4 class="blue adddMore">+ Add More</h4>
</div>
</div>
我希望在单击“添加更多”按钮时,使用唯一ID在表格中多次添加此部分。
<tr>
<td>
<div class="fullWrap medicineSearchWrap">
<input type="text" name="" required value="{{medSearchOnClickName}}"
#searchMedBox (keyup)="getSearchMedInput(searchMedBox.value)" >
<div class="fullWrap" *ngIf="medicineSearchDropDown">
<div class="innerLoadingWrap" style="z-index:999;width: 400px" *ngIf="medSearchLoader">
<md-spinner strokeWidth="7"></md-spinner>
</div>
<ul class="fullWrap medicineSearchResult" >
<li *ngFor="let medList of searchMedicine" >
<div class="fullWrap" style="padding: 10px" (click)="getMedicineOnClick(medList.name, medList.form); medicineSearchDropDown=false">
<div class="fullWrap">
<h4>
{{medList.name}} (<div class="rupeeIcon"></div>{{medList.price}})</h4>
<p>{{values}}</p>
</div>
<div class="fullWrap">
<span class="pullLeft">{{medList.manufacturer}}</span>
<span class="pullRight">
<b>Constituents: </b>
<span *ngFor="let constituents of medList.constituents">
{{constituents.name}}
</span>
</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</td>
<td>
<div class="fullWrap">
<input type="text" name="" required>
</div>
</td>
<td>
<div class="fullWrap">
<input type="text" value="{{medSearchOnClickDoseType}}" name="">
</div>
</td>
<td>
<div class="customCheckBox" style="margin-bottom:0">
<input type="checkbox" name="" value="">
<div class="check"></div>
</div>
</td>
<td>
<div class="customCheckBox" style="margin-bottom:0">
<input type="checkbox" name="" value="">
<div class="check"></div>
</div>
</td>
<td>
<div class="customCheckBox" style="margin-bottom:0">
<input type="checkbox" name="" value="">
<div class="check"></div>
</div>
</td>
<td>
<div class="customCheckBox" style="margin-bottom:0">
<input type="checkbox" name="" value="">
<div class="check"></div>
</div>
</td>
<td>
<div class="customCheckBox" style="margin-bottom:0">
<input type="checkbox" name="" value="">
<div class="check"></div>
</div>
</td>
<td>
<div class="customCheckBox" style="margin-bottom:0">
<input type="checkbox" name="" value="">
<div class="check"></div>
</div>
</td>
<td>
<div class="customCheckBox" style="margin-bottom:0">
<input type="checkbox" name="" value="">
<div class="check"></div>
</div>
</td>
<td>
<div class="customCheckBox" style="margin-bottom:0">
<input type="checkbox" name="" value="">
<div class="check"></div>
</div>
</td>
<td>
<div class="fullWrap">
<input type="text" name="" required>
</div>
</td>
<td>
<div class="fullWrap">
<input type="text" name="">
</div>
</td>
</tr>
答案 0 :(得分:1)
首先创建一个行的模型。
然后创建一个全局变量作为数组,或者如果您有模型,则使用您的模型作为变量的类型。
medicineAddList = Array<AddMedicineModel>() ; // your medicine model class
然后创建一个addMore方法
addMore() {
var medData = new AddMedicineModel() // creating object of your model class
this.medicineAddList.push(medData) ;
}
在您的HTML循环中,您的数组行
<tr *ngfor="let medObj in medicineAddList">
在添加更多按钮
中添加addMore
方法
<h4 class="blue adddMore" (click)="addMore()"> Add More</h4>
希望这会对你有所帮助:)