添加行功能的角度NG重复推新对象 [英] Add row function to push new object in angular ng-repeat

问题描述

我有一个NG重复硕士对象中的父对象。我也有另一种NG-重复的子对象为每个父对象。

I have one ng-repeat for parent Objects inside Master Object. I also have another ng-repeat for child objects for each parent object.

子对象有两个文本框和一个动作code属性。
当我点击添加行我想新的行对象的动作code设置为A

child object has two textboxes and one actionCode attribute . When I click on add row I want to set action code of new row object to A.

<tbody ng-repeat= "parent in master.parentList">
    <tr ng-class="pNumRow" >
        <td class="dropdown action display-none arrow"><img src="images/icon_down.png" id="dropdownMenu2"  class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true"/>
            <div class="dropdown-menu cursor-auto" aria-labelledby="dropdownMenu2">
                <div class="col-md-12 col-lg-12 col-sm-12 padding-0">
                    <ul class="menu">
                        <li role="presentation" class="cursor addRow" ng-click="addRow(part,$event)">Add row</li>
                        <li class="divider"></li>                                   
                    </ul>
                </div>
            </div>
        </td>
        <td>
            <div>
                <input class="display-none" type="text" ng-model="pseudoStructuredetails.partNumber"/> 
            </div>  
        </td>
    </tr>
    <tr class="masterRow" ng-repeat= "child parent.childList" bs-popover>
        <td>&nbsp;</td>
        <td class="dropdown action display-none arrow"><img src="images/icon_down.png" id="dropdownMenu2" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true"/>
            <div class="dropdown-menu cursor-auto" aria-labelledby="dropdownMenu2">
                <div class="col-md-12 col-lg-12 col-sm-12 padding-0">
                    <ul class="menu">
                        <li role="presentation" class="cursor addRow" ng-click="addRow(part,$event)">add row</li>

                    </ul>
                </div>
            </div>
        </td>
        <td>
            <div>                                                           
                <input class="display-none psedostrctInput" type="text" ng-model="child.Number"/> 
                <input class="display-none psedostrctInput" type="text" ng-model="child.Application"/> 
            </div>  
        </td>

我的控制器如下：

My controller is as follows

$scope.addRow = function(parent,e) {
    childRow = {
        actionCode:'A',
        Number: '',
        Application: ''
    };

    var trLength =  $(e.currentTarget).parent().parent().parent().parent().parent().nextAll('.pNumRow:first').length;

    var newMastertr = $('<tr class="masterRow"><td><input type="checkbox" class="check" ng-click="enableButton()"/></td><td><span></span></td><td class="dropdown action arrow"><img src="images/icon_down.png" id="dropdownMenu2" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true"/><div class="dropdown-menu cursor-auto" aria-labelledby="dropdownMenu2"><div class="col-md-12 col-lg-12 col-sm-12 padding-left10"><ul class="menu"><li role="presentation" class="cursor addRow" ng-click="addRow($event)">Add Master Code</li><li role="presentation" class="cursor delete" ng-click="deleteRow($event)">Delete Master Code</li></ul></div></div></td><td><div><span class="margin-left10 psedostrctSpan"></span><input type="text" class="psedostrctInput" ng-model="masterNumberNewRow.masterNumber" /><input type="text" class="psedostrctInput" ng-model="masterNumberNewRow.masterApplication" /></div></td><td Colspan={{PseudoStructure.maxNumberOfSuffixes}} class="ordrCode"><span></span></td></tr>');
    if(trLength != 0){
        $(e.currentTarget).parent().parent().parent().parent().parent().nextAll('.pNumRow:first').before(newMastertr);
    }
    else if(trLength === 0){
        $(e.currentTarget).parent().parent().parent().parent().parent().after(newMastertr);
    }
    part.masterNumberList.push({actionCode:'A',masterNumber:'',masterApplication:''});

    $compile(newMastertr)($scope);
};

我能够推动作用code作为新的列表，但不能得到数量和应用的文本框绑定新行补充说。

i am able to push action code as A in new list but could not get number and application text box to bind for the new rows added.

我在编制范围内的html code新潮流的添加一行。

I am adding row by compiling html code of new tr in scope.

请帮我推新的儿童通过添加行函数对象父。

Please help me to push new child objects to parent by add row function.

推荐答案

您正在使这个要复杂得多它需要。你已经有一个数据结构和方法，使与 NG-重复重复行。你的函数不需要操作DOM，只需要更新父对象，并让 NG-重复做的工作。

You are making this more complex than it needs to be. You already have a data structure and a way to make repeating rows with the ng-repeat. Your function doesn't need to manipulate the DOM, it only needs to update the parent object and let ng-repeat do it's work.

您 addRow（）功能只需要在类似如下：

Your addRow() function only needs to be something like the following:

$scope.addRow = function() {
    var childRow = {
        actionCode:'A',
        Number: '',
        Application: ''
    };
    $scope.parent.childList.push(childRow);
}

这篇关于添加行功能的角度NG重复推新对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！