Issue
Dynamic added row text value not getting. First row data is getting while convert html to pdf but dynamic added row text value not getting. How to push data through Angularjs from dynamic row. Thanks! Please see my code below Table structure:
<table id='myTable' width='100%' >
<tbody>
<tr id="FacultyEmployees">
<th width="25%" class="">Report Reference</th>
<th width="25%" class="">Item No.</th>
<th width="25%" class="">Comment</th>
<th width="25%" class="">Action</th>
</tr>
<tr id="regFacEmpType1" data-child-type='regExemptEmpType1' data-parent-type='regFacEmpType1'>
<td width="25%" class="border" ><input class="form-control c-edit" ng-model="data.agencyBudgeted" type="text" name="agencyBudgeted" id="agencyBudgeted1" /><span class="c-disp">{{ data.agencyBudgeted }}</span></td>
<td width="25%" class="border" ><input class="form-control c-edit" ng-model="data.piBudgetedAmount" type="text" name="piBudgetedAmount" id="piBudgetedAmount1" /><span class="c-disp">{{ data.piBudgetedAmount }}</span></td>
<td width="25%" class="border" ><input class="form-control c-edit" ng-model="data.piAdjustedBudget" type="text" id="piAdjustedBudget1" name="PI Adjusted Budget" /><span class="c-disp">{{ data.piAdjustedBudget }}</span></td>
<td width="22%" class="border" ><input class="form-control c-edit" ng-model="data.comments" type="text" name="Comments" id="comments1" /><span class="c-disp">{{ data.comments }}</span></td>
<td><button type='button' class="addRegular">+</button></td>
</tr>
</tbody>
</table>
Script:
<script type="text/javascript">
$(document).ready(function () {
function addRow() {
var $myTable = $("#myTable").find('tbody');
var parent = $(this).parent("td").parent("tr").attr("id");
var newRowID = $myTable.children("tr").length + 1;
var $newRow = $("<tr id='regFacEmpType" + newRowID + "' data-parent-row='" + parent + "'>");
$newRow.append($("<td class='border' id='RegEmpAgencyBudgt" + newRowID + "'><input ng-model='data.RegEmpAgencyBudgt" + newRowID + "' class='form-control c-edit' type='text' name='RegEmpAgencyBudgt" + newRowID + "' /></td>"));
$newRow.append($("<td class='border' id='RegEmpRowBdgt" + newRowID + "'><input ng-model='data.RegEmpRowBdgt" + newRowID + "' class='form-control c-edit' type='text' name='RegEmpRowBdgt" + newRowID + "' /></td>"));
$newRow.append($("<td class='border' id='RegEmpRowAdjBudget" + newRowID + "'><input ng-model='data.AdjustedBudgetRegularEmpType" + newRowID + "' class='form-control c-edit' type='text' name='AdjustedBudgetRegularEmpType" + newRowID + "' /></td>"));
$newRow.append($("<td class='border' id='RegEmpRowComments" + newRowID + "'><input ng-model='data.RegEmpComments" + newRowID + "' class='form-control c-edit' type='text' name='RegEmpComments" + newRowID + "' /></td>"));
$newRow.append($("<td></td>").append($("<button class='addRegular' type='button'>+</button>").bind("click", addRow))); //make it where any plus subsequently added will add a row
$newRow.append($("<td></td>").append($("<button class='removeRegular' id='removeRegular" + newRowID +"' type='button'>-</button>").bind("click", function(){ removeRegularRow(newRowID); })));
$myTable.append($newRow);
};
//for some reason this is called everytime I click the PLUS also it does nothing?
function removeRegularRow(index) {
$("#regFacEmpType" + index).remove();
};
$(".addRegular").on("click", addRow); //make it so the default row adds a new one.
});
</script>
Solution
I have fix this with my below code. HTML for dynamic row
<script type="text/ng-template" id="LocationDataTemplate">
<div class="container-fluid">
<div class="row font-weight-bold text-white" ng-if=" index!=0">
<div class="col p-1 text-right c-edit" ng-if="index!=0">
<button type="button" data-appliance-remove-index="{{index}}" class="remove-apppliance btn btn-danger">x</button>
</div>
</div>
<div class="row">
<div class="col-3 px-0 border border-top-0 ">
<input type="text" ng-model="data.Reference" value="{Reference}" placeholder="Reference" class="c-edit form-control" />
<span class="c-disp px-3">{{ data.Reference }}</span>
</div>
<div class="col-3 px-0 border border-top-0 border-left-0 ">
<input type="text" ng-model="data.ItemNo" value="{ItemNo}" placeholder="Item No" class="c-edit form-control" />
<span class="c-disp px-3">{{ data.ItemNo }}</span>
</div>
<div class="col-3 px-0 border border-top-0 border-left-0 ">
<input type="text" ng-model="data.Comment" value="{Comment}" placeholder="Comment" class="c-edit form-control" />
<span class="c-disp px-3">{{ data.Comment }}</span>
</div>
<div class="col px-0 border border-top-0 border-left-0 ">
<input type="text" ng-model="data.Action" value="{Action}" placeholder="Action" class="c-edit form-control" />
<span class="c-disp px-3">{{ data.Action }}</span>
</div>
</div>
</div>
</script>
IN Body HTML
<div class="row">
<div class="col-3 py-1 border border-top-0 ez-label font-weight-bold">
Report Reference
</div>
<div class="col-3 py-1 border border-top-0 border-left-0 ez-label font-weight-bold">
Item No
</div>
<div class="col-3 py-1 border border-top-0 border-left-0 ez-label font-weight-bold">
Comment
</div>
<div class="col py-1 border border-top-0 border-left-0 ez-label font-weight-bold">
Action
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="content">
<section1 class="" ng-repeat="data in data.location_data track by $index" data="sdata" index="{{$index}}"></section1>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col">
<button id="AddSection" type="button" class="btn btn-secondary btn-sm" ng-click="addSection()">
Add
</button>
</div>
</div>
angualrjs code
app.directive('section1', function () {
return {
restrict: 'EA',
scope: {
sdata: "=sdata",
index: "@"
},
template: $("#LocationDataTemplate").html()
}
});
$scope.addSection = function () {
$scope.data.location_data.push({});
}
if ($scope.data.location_data.length == 0) {
$scope.addSection();
}
Answered By - Letoncse
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.