Add row function to push new object in angular ng-repeat

Question

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

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

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.

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.

if you use jQuery inside angular controller - you do something wrong :-) try see this [post](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background) — Grundy, Jul 09 '15 at 08:40
This is a terrible idea. you should NEVER have to do something like `parent().parent().parent().parent()......` in Angular. not only is it completely unreadable and impossible to maintain, it's also an indication that you aren't coding against your actual data structure, but trying to code against the DOM, which isn't the angular way. — Claies, Jul 09 '15 at 08:41
without really studying your code, which is definitely not the right way to do it, it sounds like you want to add a new child to the parent. `ng-repeat` is already dynamic, if you add a new child, angular will render that child immediately. — Claies, Jul 09 '15 at 08:47
thank you for the link @Grundy. at Claise You have precisely understood the situation I am in :) the UI stuff(pages,controller) we have got from other team is as per DOM and not the data. I am trying to integrate it with data. — teksan, Jul 09 '15 at 08:48
seems here error: `ng-repeat= "child parent.childList"` and also instead of do it with jQuery you can simple add element to `parent.childList` or something like this — Grundy, Jul 09 '15 at 08:52

score 0 · Accepted Answer · answered Jul 09 '15 at 08:55

0

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.

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

answered Jul 09 '15 at 08:55

Claies

22,124
4
53
77

I will try this approach. Thanks – teksan Jul 09 '15 at 09:11
since you accepted the answer, does that mean that this worked the way you needed? – Claies Jul 09 '15 at 18:11
I have accepted it since it is angular way of doing this. I found plunkers and played around with them to. – teksan Jul 10 '15 at 02:56

Add row function to push new object in angular ng-repeat

1 Answers1

Linked