Angularjs 动态添加的行文本值未获取

Question

未获取动态添加的行文本值。将 html 转换为 pdf 时获取第一行数据，但未获取动态添加的行文本值。如何从动态行通过 Angularjs 推送数据。谢谢！请在下面查看我的代码 Table结构：

        <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 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>

Answer 1

我已经用下面的代码解决了这个问题。 HTML 用于动态行

 <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>

正文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 代码

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();
            }

Angularjs 动态添加的行文本值未获取

Angularjs Dynamic added row text value not getting

html

angularjs