Display nested Child Table records in Bootstrap Popup on Button Click in AngularJS

Last Reply 27 days ago By dharmendr

Posted 27 days ago

if we click subitems it can open one pop up window after entereing values on pop up window we can close that window 

after clicking of add function in parent row the values can be goes to above row in that

Order values are dispalying in table format 

i need to display order values on pop up window

@{ 
    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>{{m.Name}}"</td>
                    <td>{{m.Country}}</td>

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


                    <td value="{{m.subitems}}">
                        <table class="table table-bordered" 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>

 

 

Posted 27 days ago

Hi mahesh213,

Refer below sample code.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://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 () {
            var customer = {};
            customer.Name = $scope.Name;
            customer.Country = $scope.Country;
            customer.Orders = $scope.Orders;
            $scope.Customers.push(customer);
            $scope.Orders = [];
            $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) {
            var name = $scope.Customers[index].Name;
            if ($window.confirm("Do you want to delete: " + name)) {
                $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 value="{{m.subitems}}">
                    <button type="button" class="btn btn-primary" ng-init="clicked=false" ng-click="clicked=!clicked">
                        View Orders</button>
                    <div class="modal fade in" aria-hidden="false" style="display: block;" ng-show="clicked">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" ng-click="clicked=false">
                                        ×</button>
                                    <h4 class="modal-title">
                                        Order Details</h4>
                                </div>
                                <div class="modal-body">
                                    <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 ng-repeat="o in m.Orders">
                                            <tr>
                                                <td>
                                                    {{o.OrderId}}
                                                </td>
                                                <td>
                                                    {{o.Freight}}
                                                </td>
                                                <td>
                                                    {{o.ShipCountry}}
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-primary" ng-click="clicked=false">
                                        Ok</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
                <td>
                    <input type="button" ng-click="Remove($index)" value="Remove" class="btn btn-danger" />
                </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" class="btn btn-primary" ng-model="subitems" data-toggle="modal"
                        data-target="#popup">
                        Add Orders</button>
                </td>
                <td>
                    <input type="button" ng-click="Add()" class="btn btn-primary" 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" 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>

Demo