Dynamically add remove Rows in nested Table in AngularJS

Last Reply 27 days ago By mahesh213

Posted 29 days ago

see we have 3 text boxes name,country and subitems

after clicking of subitems one popup should appear in that pop up again we have 3 text boxes  OrderId,Freight,ShipCountry 

Right now my requirement is i want dynamically add/remove rows in parent row in the same way

for chikd row also we have dynamically add/remove rows

subitems is a child row 

I haven't wrote any code for pop up 

I don't know where  to  start  popup code for child row 

after clicking of subitems popup textbox also i need to add/remove n no of rows 

@{ 
    Layout = null;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope, $window) {
            $scope.Customers = [
                {
                    Name: "John Hammond", Country: "United States",

                    Orders: [
                        { OrderId: 10248, Freight: 32.38, ShipCountry: 'France' },
                        { OrderId: 10249, Freight: 12.43, ShipCountry: 'Japan' },
                        { OrderId: 10250, Freight: 66.35, ShipCountry: 'Russia' }
                    ]
                },
                {
                    Name: "Mudassar Khan", Country: "India",
                    Orders: [
                        { OrderId: 10248, Freight: 32.38, ShipCountry: 'France' },
                        { OrderId: 10249, Freight: 12.43, ShipCountry: 'Japan' },
                        { OrderId: 10250, Freight: 66.35, ShipCountry: 'Russia' }
                    ]
                },
                {
                    Name: "Suzanne Mathews", Country: "France",
                    Orders: [
                        { OrderId: 10248, Freight: 32.38, ShipCountry: 'France' },
                        { OrderId: 10249, Freight: 12.43, ShipCountry: 'Japan' },
                        { OrderId: 10250, Freight: 66.35, ShipCountry: 'Russia' }
                    ]
                },
                {
                    Name: "Robert Schidner", Country: "Russia",
                    Orders: [
                        { OrderId: 10248, Freight: 32.38, ShipCountry: 'France' },
                        { OrderId: 10249, Freight: 12.43, ShipCountry: 'Japan' },
                        { OrderId: 10250, Freight: 66.35, ShipCountry: 'Russia' }
                    ]
                }
                ];

            $scope.Add = function () {
                //Add the new item to the Array.
                var customer = {};
                customer.Name = $scope.Name;
                customer.Country = $scope.Country;
                $scope.Customers.push(customer);

                //Clear the TextBoxes.
                $scope.Name = "";
                $scope.Country = "";
            };

            $scope.Remove = function (index) {
                //Find the record using Index from Array.
                var name = $scope.Customers[index].Name;
                if ($window.confirm("Do you want to delete: " + name)) {
                    //Remove the item from Array using Index.
                    $scope.Customers.splice(index, 1);
                }
            }
        });
    </script>
    <div ng-app="MyApp" ng-controller="MyController">
        <table cellpadding="0" cellspacing="0">
            <tr>
                <th>Name</th>
                <th>Country</th>
                <th>subitems</th>
            </tr>
            <tbody ng-repeat="m in Customers">
                <tr>
                    <td><input type="text" value="{{m.Name}}" /></td>
                    <td><input type="text" value="{{m.Country}}" /></td>

                    <td>
                        <table cellpadding="0" cellspacing="0">
                            <tr>
                                <th>Order Id</th>
                                <th>Freight</th>
                                <th>ShipCountry</th>
                            </tr>
                            <tbody ng-repeat="o in m.Orders">
                                <tr>
                                    <td>{{o.OrderId}}</td>
                                    <td>{{o.Freight}}</td>
                                    <td>{{o.ShipCountry}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </td>

                    <td><input type="button" ng-click="Remove($index)" value="Remove" /></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td><input type="text" ng-model="Name" /></td>
                    <td><input type="text" ng-model="Country" /></td>



                    <td><input type="button" ng-click="Add()" value="Add" /></td>
                </tr>
            </tfoot>
        </table>
    </div>
</body>
</html>

 

Posted 27 days ago Modified on 27 days ago

Helo i got solution 

Put $scope.Orders=[];

in add() function and then run we will get solution what i need

but right now my reqirement i need edit functionality in parent and child row

could you please share some code how to edit row to above code 

i need to display orders values in pop up not in text 

@{ 
    Layout = null;
}

<html>
<head>
    <title></title>
</head>
<body>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope, $window) {
            $scope.Customers = [
                {
                    Name: "John Hammond", Country: "United States",

                    Orders: [
                        { OrderId: 10248, Freight: 32.38, ShipCountry: 'France' },
                        { OrderId: 10249, Freight: 12.43, ShipCountry: 'Japan' },
                        { OrderId: 10250, Freight: 66.35, ShipCountry: 'Russia' }
                    ]
                },
                
            ];

            $scope.Orders = [];


            $scope.Add = function () {
                //Add the new item to the Array.
                var customer = {};
                customer.Name = $scope.Name;
                customer.Country = $scope.Country;
                customer.Orders = $scope.Orders;

                $scope.Customers.push(customer);
                $scope.Orders = [];


                //Clear the TextBoxes.
                $scope.Name = "";
                $scope.Country = "";
            };

            $scope.add2 = function () {

                var items = {};
                items.OrderId = $scope.OrderId;
                items.Freight = $scope.Freight;
                items.ShipCountry = $scope.ShipCountry;

                $scope.Orders.push(items);
                $scope.OrderId = "";
                $scope.Freight = "";
                $scope.ShipCountry = "";

            }


            $scope.Remove = function (index) {
                //Find the record using Index from Array.
                var name = $scope.Customers[index].Name;
                if ($window.confirm("Do you want to delete: " + name)) {
                    //Remove the item from Array using Index.
                    $scope.Customers.splice(index, 1);
                }

            }


            $scope.remove1 = function (index) {
                var name = $scope.Orders[index].OrderId;
                if ($window.confirm("Do you want to delete: " + name)) {
                    $scope.Orders.splice(index, 1);
                }
            }

        });
    </script>
    <div ng-app="MyApp" ng-controller="MyController">
        <table cellpadding="0" cellspacing="0">
            <tr>
                <th>Name</th>
                <th>Country</th>
                <th>Orders</th>
                <th>&nbsp;</th>
            </tr>
            <tbody ng-repeat="m in Customers">
                <tr>
                    <td><input type="text" value="{{m.Name}}" /></td>
                    <td><input type="text" value="{{m.Country}}" /></td>

                    @*<td><button type="button"   value="{{m.subitems}}"  data-toggle="modal" data-target="#popup">Click</button></td>*@


                    <td value="{{m.subitems}}">
                        <table cellpadding="0" cellspacing="0">
                            <tr>
                                <th>Order Id</th>
                                <th>Freight</th>
                                <th>ShipCountry</th>

                            </tr>
                            <tbody ng-repeat="o in m.Orders">
                                <tr>
                                    <td>{{o.OrderId}}</td>
                                    <td>{{o.Freight}}</td>
                                    <td>{{o.ShipCountry}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </td>

                    <td><input type="button" ng-click="Remove($index)" value="Remove" /></td>
                </tr>
            </tbody>

            <tfoot>
                <tr>
                    <td><input type="text" ng-model="Name" /></td>
                    <td><input type="text" ng-model="Country" /></td>

                    <td><button type="button" ng-model="subitems" data-toggle="modal" data-target="#popup">Click</button></td>
                    <td><input type="button" ng-click="Add()" value="Add" /></td>
                </tr>
            </tfoot>
        </table>
        <div class="modal fade" id="popup" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">×</button>
                        <h4 class="modal-title">Modal Header</h4>
                    </div>
                    <div class="modal-body">
                        <div class="s2vk-container">
                            <div class="row">
                                <div class="col-md-8">
                                    <div class="panel panel-default">
                                        <table class="table table-condensed">
                                            <thead>
                                                <tr style="padding-left:10px; padding-right:10px;" class="active">
                                                    <th class="thick-line" style="padding-left:10px; padding-right:20px; padding-top:6px; padding-bottom:6px;">OrderId</th>
                                                    <th style="padding-left:10px; padding-right:10px;" class="thick-line">Freight</th>
                                                    <th style="padding-left:10px; padding-right:10px;" class="thick-line">ShipCountry</th>
                                                    <th style="padding-left:10px; padding-right:10px;" class="thick-line"> </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr style="padding-left:20px; padding-right:20px;" ng-model="myData2" ng-repeat="subitem in Orders">
                                                    <td>{{subitem.OrderId}}</td>
                                                    <td>{{subitem.Freight}}</td>
                                                    <td>{{subitem.ShipCountry}}</td>
                                                    <td>
                                                        <button type="button" class="btn btn-sm btn-danger" ng-click="remove1($index)" readonly=readonly>Delete</button>
                                                    </td>
                                                </tr>
                                            </tbody>
                                            <tfoot>
                                                <tr style="padding-left:20px; padding-right:20px;">
                                                    @*<td><input type="text" ng-model="Id"/></td>*@
                                                    <td>

                                                        <input type="text" class="input-sm form-control" ng-model="OrderId" />
                                                    </td>
                                                    <td>
                                                        <input type="text" class="input-sm form-control" ng-model="Freight" />
                                                    </td>
                                                    <td>
                                                        <input type="text" class="input-sm form-control" ng-model="ShipCountry" />
                                                    </td>
                                                    <td>
                                                        <button type="button" class="btn btn-primary" ng-click="add2()">Add</button>
                                                    </td>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>