Post
Ask Question
Mahesh Reddy

Mahesh Reddy

  • NA
  • 363
  • 17.3k

Dynamically add/delete rows in child row of parent row

Nov 15 2018 3:45 AM
@{
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>
<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' }
]
},
{
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.Orders = [];
$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.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.subitems[index].text;
if ($window.confirm("Do you want to delete: " + name)) {
$scope.subitems.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>
<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}}">
<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="{{'#' + subitem+'Opts'}}">Click</button></td>
<td><input type="button" ng-click="Add()" value="Add" /></td>
</tr>
</tfoot>
</table>
<div class="modal fade" id="{{subitem+'Opts'}}" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</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:20px; padding-right:20px;" class="active">
<th class="thick-line" style="padding-left:20px; padding-right:20px; padding-top:6px; padding-bottom:6px;">OrderId</th>
<th style="padding-left:20px; padding-right:20px;" class="thick-line">Freight</th>
<th style="padding-left:20px; padding-right:20px;" class="thick-line">ShipCountry</th>
<th style="padding-left:20px; padding-right:20px;" class="thick-line">&nbsp;</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>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>
 
hi , please be look at my code and try to override my problem
I need to add/delete rows dynamically in child row of parent row
For each parent row we have unique child row
In above code sample code subitems is a child row
Once we click subitems we want to display one pop up window and in that we need 3 fileds named as fright,OrderId,shipcountry

Answers (15)