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